added custom preloader

bhat-shubham · Sep 17, 2024 · fae0b80 · fae0b80
1 parent 2bde03d
commit fae0b80
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/img/preloader - Made with Clipchamp.gif b/img/preloader - Made with Clipchamp.gif
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
 <body>
     <body onload="hideLoader()">
         <div id="loader">
+            <img src="img/preloader - Made with Clipchamp.gif">
 
         </div>
     <div class="side-navbar">

diff --git a/script.js b/script.js
@@ -23,6 +23,9 @@ faqBoxes.forEach(faqBox => {
 });
 var loaderElement = document.getElementById("loader");
 
-function hideLoader() {
-  loaderElement.style.display = "none";
-}
+// function hideLoader() {
+//   loaderElement.style.display = "none";
+// }
+setTimeout(function()  {
+  loaderElement.style.display="none";
+},5000);
diff --git a/style.css b/style.css
@@ -56,12 +56,19 @@ body {
     position: fixed;
     width: 100%;
     height: 100vh;
-    margin: 0 auto;
-    background-color: #111;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* margin: 0 auto; */
+    background-color: #000;
     z-index: 999;
   }
+  #loader img{
+    width: 20%;
+    height: 20%;
+  }
 
-#loader:before {
+/* #loader:before {
     content: "";
     position: absolute;
     bottom: 50%;
@@ -72,7 +79,7 @@ body {
     border-radius: 50%;
     background: #2a9d8f;
     animation: loading-bounce 0.5s ease-in-out infinite alternate;
-  }
+  } */
 
   /* #loader:after {
     content: "";