Merge pull request ANSHIKA-26#473 from VidhanThakur09/preloaderFeature

Improve Preloader
FarhanBijapur · Oct 7, 2024 · fbc0c23 · fbc0c23
2 parents b737ae3 + 2ef41f0
commit fbc0c23
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -21,6 +21,10 @@
 
 </head>
 <body>
+    <!-- preloader -->
+    <div id="preloader">
+        <div class="loader">Loading...</div>
+    </div>
     <!--header-->
     <header class="navbar">
         <div class="logo">
@@ -793,6 +797,11 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
     <!-- this script is to display the year in the copyright authentication in the footer -->
     <script>
         document.getElementById('current-year').textContent = new Date().getFullYear();
+        // /preloader js styling
+        let preloader = document.querySelector("#preloader");
+        window.addEventListener("load",function(e){
+            preloader.style.display = "none";
+        });
     </script>
 
     <script src="faq.js"></script>

diff --git a/style.css b/style.css
@@ -5,7 +5,52 @@ githu * {
   padding: 0;
   box-sizing: border-box;
 }
+#preloader{
+  background: #ddbea9;
+  height: 100vh;
+  width: 100%;
+  position: fixed;
+  z-index: 200;
+}
+.loader {
+  width: 250px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  font-family: helvetica, arial, sans-serif;
+  text-transform: uppercase;
+  font-weight: 900;
+  color: #ce4233;
+  letter-spacing: 0.2em;
+
+  &::before, &::after {
+    content: "";
+    display: block;
+    width: 15px;
+    height: 15px;
+    background: #ce4233;
+    position: absolute;
+    animation: load .7s infinite alternate ease-in-out;
+  }
+
+  &::before {
+    top: 0;
+  }
+
+  &::after {
+    bottom: 0;
+  }
+}
 
+@keyframes load {
+  0% { left: 0; height: 30px; width: 15px }
+  50% { height: 8px; width: 40px }
+  100% { left: 235px; height: 30px; width: 15px}
+}
 /*
 font-family: 'Nunito Sans', sans-serif;
 font-family: 'Roboto', sans-serif;