Added a preloader to website

AbhiDiva96 · Jun 12, 2024 · f2a9025 · f2a9025
1 parent df5abf7
commit f2a9025
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,11 +24,58 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+      <style>
+
+
+    *{
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    .loading {
+        -webkit-animation: sk-scaleout 1s infinite ease-in-out;
+        animation: sk-scaleout 1s infinite ease-in-out;
+        background-color: rgb(22, 110, 233);
+        border-radius: 100%;
+        height: 6em;
+        width: 6em;
+
+      }
+
+      .container {
+        margin: 0;
+        padding: 0;
+        background-color: none;
+        height: 100vh;
+        width: 100vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+      }
+
+      @keyframes sk-scaleout {
+        0% {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+        }
+        100% {
+          -webkit-transform: scale(1);
+          opacity: 0.5;
+          transform: scale(1);
+        }
+      }
+  </style>
+
     <title>75%.Com</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+    <div id="spinner" class="container">
+      <div class="loading"></div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -17,9 +17,16 @@ function App() {
   // const toggleTheme = () => {
   //   setTheme((curr) => (curr === "light" ? "light ": "dark"));
   // }
-
-
-  return (
+  const [loading, setLoading] = useState(true);
+  const spinner = document.getElementById("spinner");
+  if (spinner) {
+    setTimeout(() => {
+      spinner.style.display = "none";
+      setLoading(false);
+    }, 2000);
+  }
+  return(
+    !loading &&(
 <div className="maintain">
 
     {/* <ThemeContext.Provider value={{theme, toggleTheme}}> */}
@@ -36,6 +43,7 @@ function App() {
 
     </div>
   )
+)
 }
 
 export default App