Merge pull request #286 from dhairyagothi/main

Added Preloader in website
TechNodes2-0 · Jun 14, 2024 · cd3dec1 · cd3dec1
2 parents cad176f + 6e1b969
commit cd3dec1
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 3 deletions.
diff --git a/client/index.html b/client/index.html
@@ -10,10 +10,253 @@
       href="https://cdn-icons-png.flaticon.com/512/5526/5526535.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+
+.preloader-equalizer {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+     --tw-bg-opacity: 1;
+        background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+        height: 100vh;
+        width: 100vw;
+}
+  .preloader-equalizer ul {
+    margin: 0;
+    list-style: none;
+    width: 88px;
+    height: 63px;
+    position: relative;
+    padding: 0;
+    height: 10px;
+  }
+    .preloader-equalizer ul li{
+      position: absolute;
+      width: 2px;
+      height: 0;
+      background-color: white;
+      bottom: 0;
+    }
+
+  .preloader-equalizer ul li {
+     &:nth-child(1) {
+      left: 0;
+      animation: cssload-sequence1 1.15s ease infinite 0;
+      -o-animation: cssload-sequence1 1.15s ease infinite 0;
+      -ms-animation: cssload-sequence1 1.15s ease infinite 0;
+      -webkit-animation: cssload-sequence1 1.15s ease infinite 0;
+      -moz-animation: cssload-sequence1 1.15s ease infinite 0;
+    }
+    &:nth-child(2) {
+      left: 15px;
+      animation: cssload-sequence2 1.15s ease infinite 0.12s;
+      -o-animation: cssload-sequence2 1.15s ease infinite 0.12s;
+      -ms-animation: cssload-sequence2 1.15s ease infinite 0.12s;
+      -webkit-animation: cssload-sequence2 1.15s ease infinite 0.12s;
+      -moz-animation: cssload-sequence2 1.15s ease infinite 0.12s;
+    }
+    &:nth-child(3) {
+      left: 29px;
+      animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
+      -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
+      -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
+      -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
+      -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.23s;
+    }
+    &:nth-child(4) {
+      left: 44px;
+      animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
+      -o-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
+      -ms-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
+      -webkit-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
+      -moz-animation: cssload-sequence2 1.15s ease-in infinite 0.35s;
+    }
+    &:nth-child(5) {
+      left: 58px;
+      animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
+      -o-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
+      -ms-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
+      -webkit-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
+      -moz-animation: cssload-sequence1 1.15s ease-in-out infinite 0.46s;
+    }
+    &:nth-child(6) {
+      left: 73px;
+      animation: cssload-sequence2 1.15s ease infinite 0.58s;
+      -o-animation: cssload-sequence2 1.15s ease infinite 0.58s;
+      -ms-animation: cssload-sequence2 1.15s ease infinite 0.58s;
+      -webkit-animation: cssload-sequence2 1.15s ease infinite 0.58s;
+      -moz-animation: cssload-sequence2 1.15s ease infinite 0.58s;
+    }
+  }
+
+
+@keyframes cssload-sequence1 {
+  0% {
+    height: 10px;
+  }
+
+  50% {
+    height: 49px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}
+
+
+@-o-keyframes cssload-sequence1 {
+  0% {
+    height: 10px;
+  }
+
+  50% {
+    height: 49px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}
+
+
+@-ms-keyframes cssload-sequence1 {
+  0% {
+    height: 10px;
+  }
+
+  50% {
+    height: 49px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}
+
+
+@-webkit-keyframes cssload-sequence1 {
+  0% {
+    height: 10px;
+  }
+
+  50% {
+    height: 49px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}
+
+
+@-moz-keyframes cssload-sequence1 {
+  0% {
+    height: 10px;
+  }
+
+  50% {
+    height: 49px;
+  }
+
+  100% {
+    height: 10px;
+  }
+}
+
+
+@keyframes cssload-sequence2 {
+  0% {
+    height: 19px;
+  }
+
+  50% {
+    height: 63px;
+  }
+
+  100% {
+    height: 19px;
+  }
+}
+
+
+@-o-keyframes cssload-sequence2 {
+  0% {
+    height: 19px;
+  }
+
+  50% {
+    height: 63px;
+  }
+
+  100% {
+    height: 19px;
+  }
+}
+
+
+@-ms-keyframes cssload-sequence2 {
+  0% {
+    height: 19px;
+  }
+
+  50% {
+    height: 63px;
+  }
+
+  100% {
+    height: 19px;
+  }
+}
+
+
+@-webkit-keyframes cssload-sequence2 {
+  0% {
+    height: 19px;
+  }
+
+  50% {
+    height: 63px;
+  }
+
+  100% {
+    height: 19px;
+  }
+}
+
+
+@-moz-keyframes cssload-sequence2 {
+  0% {
+    height: 19px;
+  }
+
+  50% {
+    height: 63px;
+  }
+
+  100% {
+    height: 19px;
+  }
+}
+
+    </style>
     <title>ElectiveHub</title>
   </head>
   <body className="bg-gray-900">
     <div id="root"></div>
+    <div class="preloader-equalizer" id="spinner">
+      <ul >
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
     <script src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/client/src/App.css b/client/src/App.css
@@ -1,5 +1,7 @@
 /* src/styles/global.css */
-
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 /* WebKit-based browsers (Chrome, Safari) */
 html ::-webkit-scrollbar {
   width: 6px;
@@ -26,5 +28,5 @@ html ::-webkit-scrollbar-thumb:hover {
 
 
 body {
-  @apply bg-gray-100 text-gray-900;
+  @apply text-gray-900 bg-gray-100;
 }
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -48,7 +48,17 @@ function App() {
   // const token = cookies.get("TOKEN");
 
 const locomotiveScroll = new LocomotiveScroll();
-  return (
+
+    const [loading, setLoading] = useState(true);
+  const spinner = document.getElementById("spinner");
+  if (spinner) {
+    setTimeout(() => {
+      spinner.style.display = "none";
+      setLoading(false);
+    }, 2000);
+  }
+  return(
+    !loading && (
     <>
       <AlanAIComponent />
       {/* <h1>{import.meta.env.VITE_API_URL}</h1> */}
@@ -147,6 +157,7 @@ const locomotiveScroll = new LocomotiveScroll();
       <Footer />
 
     </>
+    )
   );
 }