changed preloader

nitinsooni · Sep 27, 2024 · 9de2ace · 9de2ace
1 parent 3e3d0c0
commit 9de2ace
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 20 deletions.
diff --git a/css/media.css b/css/media.css
@@ -65,6 +65,22 @@
 }
 
 @media only screen and (max-width: 800px) {
+    .loading-screen .dot {
+        height: 10px;
+        width: 10px;
+        margin: 0 2px;
+    }
+
+    @keyframes jump {
+        0%, 40%, 100% {
+            transform: translateY(-10px);
+        }
+
+        20% {
+            transform: translateY(-20px);
+        }
+    }
+
     nav {
         position: absolute;
         justify-content: center;

diff --git a/css/style.css b/css/style.css
@@ -114,7 +114,7 @@ button {
 
 /*----------------------------------------------------*/
 
-.loading-screen {
+.preloader {
     width: 100%;
     height: 100vh;
     background-color: transparent;
@@ -124,29 +124,47 @@ button {
     position: fixed;
     z-index: 999;
     opacity: 1;
-    transition: opacity .5s ease;
+    transition: opacity .3s ease;
     backdrop-filter: blur(48px);
 }
 
-.loading-screen .loader {
-    width: 70px;
-    padding: 9px;
-    aspect-ratio: 1;
+.preloader .dot {
+    background-color: var(--gold);
+    height: 12px;
+    width: 12px;
     border-radius: 50%;
-    background: var(--gold);
-    --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
-    mask: var(--_m);
-    mask-composite: subtract;
-    animation: spin 1s infinite linear;
+    display: inline-block;
+    margin: 0 3px;
+    animation: jump 0.8s infinite ease-in-out;
 }
 
-@keyframes spin {
-    to {
-        transform: rotate(1turn);
+.preloader .dot.a {
+    animation-delay: -0.6s;
+}
+
+.preloader .dot.b {
+    animation-delay: -0.5s;
+}
+
+.preloader .dot.c {
+    animation-delay: -0.4s;
+}
+
+.preloader .dot.d {
+    animation-delay: -0.3s;
+}
+
+@keyframes jump {
+    0%, 40%, 100% {
+        transform: translateY(-12px);
+    }
+
+    20% {
+        transform: translateY(-24px);
     }
 }
 
-.loading-screen-hide {
+.preloader-hide {
     opacity: 0;
 }
 

diff --git a/index.html b/index.html
@@ -17,8 +17,11 @@
     <link rel="stylesheet" href="/assets/fonts/fontawesome/css/brands.css"/>
 </head>
 <body>
-    <div class="loading-screen">
-        <div class="loader"></div>
+    <div class="preloader">
+        <div class="dot a"></div>
+        <div class="dot b"></div>
+        <div class="dot c"></div>
+        <div class="dot d"></div>
     </div>
     <nav>
         <div class="nav-l">

diff --git a/js/script.js b/js/script.js
@@ -1,12 +1,12 @@
 // Disable loading screen when website fully loaded with fade-out animation
-const loadingScreen = document.querySelector('.loading-screen');
+const loadingScreen = document.querySelector('.preloader');
 
 window.addEventListener('load', function() {
-    loadingScreen.classList.add('loading-screen-hide');
+    loadingScreen.classList.add('preloader-hide');
 
     setTimeout(function() {
         loadingScreen.style.display = 'none';
-    }, 500);
+    }, 300);
 });
 
 // Navbar links gets in focus according to which section is in view