Not able to center Loading Spinner in my React application-CodePudding

I am making a website, and I have added a spinner that loads when the website is loading. Note that I am using react-router-dom with this.

The router works, but it is not displayed as intended. I am unable to centralize it, even with margin, left: 50% and the <center> tag.

Take a look at my code:

index.html:

<link rel="stylesheet" href="./style.css" />
    <style>
      .loader {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 130px;
        height: 130px;
        margin-left: 25%;
        margin-top: 25%;
        animation: spin 2s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <center>
      <div  style="margin-left: 25%; margin-top: 10%">
        <div ></div>
      </div>
    </center>

snippet on the working of the spinner:

  const [isLoading, setLoading] = useState(true);


  function fakeRequest() {
    return new Promise((resolve) => setTimeout(() => resolve(), 2500));
  }


  useEffect(() => {
    fakeRequest().then(() => {
      const el = document.querySelector(".loader-container");
      if (el) {
        el.remove();
        setLoading(!isLoading);
      }
    });
  }, []);

  if (isLoading) {
    return null;
  }

router (app.js):

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>

Here is the result:

Is there a way to fix this? Also, just a doubt, is it possible to remove the layout when it loads? Thanks a lot in advance!

CodePudding user response：

This is a CSS issue. Just remove your inline styles on loader-container and update your margins on .loader as below:

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: 25% auto 0 auto;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div >
  <div ></div>
</div>

And if you want to remove the style tag for the loader with it, just move your <style> inside loader-container. And you don't need the center <center> tag anymore.

CodePudding user response：

I will suggest you to use flexbox which makes the centering elements pretty easy. Just make your parent loader container a flexbox container. i.e

.loader-container {
display: flex;
align-items: center;
justify-content: center;
width:100vw;
height:100vh;

}

Learn more about flexbox on mdn.