Merge pull request #140 from Harshil-Gupta21/load

preloader fixed
SnowScriptWinterOfCode · Jan 22, 2024 · 7a9da6b · 7a9da6b
2 parents 7c6a520 + 11a419f
commit 7a9da6b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -35,7 +35,7 @@
 
   <body>
     <!-- Preloader -->
-    <div class="loader">
+    <div class="preloader">
       <div class="📦"></div>
       <div class="📦"></div>
       <div class="📦"></div>
@@ -987,8 +987,8 @@ <h4>E-Mail</h4>
       // Preloader script
       document.addEventListener("DOMContentLoaded", function () {
         setTimeout(function () {
-          document.querySelector(".loader").style.display = "none";
-        }, 2000);
+          document.querySelector(".preloader").style.display = "none";
+        }, 3000);
       });
     </script>
   </body>

diff --git a/styles.css b/styles.css
@@ -24,12 +24,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 9999;
-}
-
-.loader {
-  width: 100px;
-  height: 70px;
+  z-index: 1000;
 }
 
 #uploadContainer {
@@ -1621,7 +1616,9 @@ ul li:nth-child(even) .circle {
   display: block;
   transform-origin: -50% center;
   border-radius: var(--box-border-radius);
+  margin-right: 1rem;
 }
+
 .📦:after {
   content: "";
   width: 100%;
@@ -1633,45 +1630,59 @@ ul li:nth-child(even) .circle {
   border-radius: var(--box-border-radius);
   box-shadow: 0px 0px 10px 0px rgba(28, 159, 255, 0.4);
 }
+
 .📦:nth-child(1) {
   animation: slide var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(1):after {
   animation: color-change var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(2) {
   animation: flip-1 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(2):after {
   animation: squidge-1 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(3) {
   animation: flip-2 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(3):after {
   animation: squidge-2 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(4) {
   animation: flip-3 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(4):after {
   animation: squidge-3 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(5) {
   animation: flip-4 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(5):after {
   animation: squidge-4 var(--duration) ease-in-out infinite alternate;
 }
+
 .📦:nth-child(2):after {
   background-color: #1c9fff;
 }
+
 .📦:nth-child(3):after {
   background-color: #1fb1fd;
 }
+
 .📦:nth-child(4):after {
   background-color: #22c7fb;
 }
+
 .📦:nth-child(5):after {
   background-color: #23d3fb;
 }