Added loading animation

Mr-Thunder · Jul 14, 2020 · 366597f · 366597f
1 parent ac273af
commit 366597f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 6 deletions.
diff --git a/src/index.html b/src/index.html
@@ -19,10 +19,14 @@
         <script src="/js/all.min.js"></script>
     </head>
     <body>
+        <div class="loader">
+            <div>
+                <img class="size-auto rotate align-centre" src="assets/images/logo.svg" alt=""> 
+                 Loading
+            </div> 
+        </div>
         <div class="wrapper">
-            <div class="loader">
-                FUCKKKCKC
-            </div>
+
 
             <div class="align-centre row">
                 <!-- <img src="assets/images/logo.svg" alt=""> -->

diff --git a/src/js/global.js b/src/js/global.js
@@ -1,5 +1,8 @@
 console.log("hello there yo");
+
+// Loading Animation
 window.addEventListener("load", function () {
     loader = document.querySelector(".loader");
     loader.className += " hidden";
+
 });
diff --git a/src/pages/about.html b/src/pages/about.html
@@ -18,6 +18,12 @@
     <link rel="stylesheet" type="text/css" media="screen" href="/css/main.min.css" />
     <script src="/js/all.min.js"></script>
 </head>
+<div class="loader">
+    <div>
+        <img class="size-auto rotate align-centre" src="assets/images/logo.svg" alt=""> 
+         Loading
+    </div> 
+</div>
 <body>
 </body>
 </html>
diff --git a/src/scss/components/_loading-animation.scss b/src/scss/components/_loading-animation.scss
@@ -6,18 +6,34 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: aqua;
+    background: hotpink;
     display: flex;
     justify-content: center;
     align-items: center;
+    transform: translateY(0);
   }
 .loader.hidden{
-    animation: fadeOut 1s;
+    animation:  1s ease-in-out fadeOut .5s;
     animation-fill-mode: forwards;
   }
  @keyframes fadeOut {
     100%{
-      opacity: 0;
+      // opacity: 0;
+      transform: translateY(-100%);
       visibility: hidden;
     }
+  }
+
+
+  .rotate {
+    animation: rotation 1s infinite linear;
+  }
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
   }