Loading Animation

Mridul2820 · Aug 27, 2020 · f0ebd71 · f0ebd71
1 parent 3807f42
commit f0ebd71
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 0 deletions.
diff --git a/CSS-Projects/loading-animation/index.html b/CSS-Projects/loading-animation/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loading Animation</title>
+
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" type="image/png" href="../../assets/favicon.png">
+</head>
+<body>
+    <section>
+        <div class="loader">
+            <span style="--i:1"></span>
+            <span style="--i:2"></span>
+            <span style="--i:3"></span>
+            <span style="--i:4"></span>
+            <span style="--i:5"></span>
+            <span style="--i:6"></span>
+            <span style="--i:7"></span>
+            <span style="--i:8"></span>
+            <span style="--i:9"></span>
+            <span style="--i:10"></span>
+            <span style="--i:11"></span>
+            <span style="--i:12"></span>
+            <span style="--i:13"></span>
+            <span style="--i:14"></span>
+            <span style="--i:15"></span>
+            <span style="--i:16"></span>
+            <span style="--i:17"></span>
+            <span style="--i:18"></span>
+            <span style="--i:19"></span>
+            <span style="--i:20"></span>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/CSS-Projects/loading-animation/style.css b/CSS-Projects/loading-animation/style.css
@@ -0,0 +1,99 @@
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 100vh;
+  background: #042104;
+  -webkit-animation: bgAnimation 10s linear infinite;
+          animation: bgAnimation 10s linear infinite;
+}
+
+section .loader {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+section .loader span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  -webkit-transform: rotate(calc(18deg * var(--i)));
+          transform: rotate(calc(18deg * var(--i)));
+}
+
+section .loader span::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #00ff0a;
+  -webkit-box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;
+          box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a;
+  -webkit-animation: loadingAnimation 2s linear infinite;
+          animation: loadingAnimation 2s linear infinite;
+  -webkit-animation-delay: calc(.1s * var(--i));
+          animation-delay: calc(.1s * var(--i));
+}
+
+@-webkit-keyframes bgAnimation {
+  0% {
+    -webkit-filter: hue-rotate(0deg);
+            filter: hue-rotate(0deg);
+  }
+  100% {
+    -webkit-filter: hue-rotate(360deg);
+            filter: hue-rotate(360deg);
+  }
+}
+
+@keyframes bgAnimation {
+  0% {
+    -webkit-filter: hue-rotate(0deg);
+            filter: hue-rotate(0deg);
+  }
+  100% {
+    -webkit-filter: hue-rotate(360deg);
+            filter: hue-rotate(360deg);
+  }
+}
+
+@-webkit-keyframes loadingAnimation {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  80%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+
+@keyframes loadingAnimation {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  80%, 100% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}

diff --git a/CSS-Projects/loading-animation/style.scss b/CSS-Projects/loading-animation/style.scss
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #042104;
+    animation: bgAnimation 10s linear infinite;
+
+    .loader {
+        position: relative;
+        width: 120px;
+        height: 120px;
+
+        span {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform: rotate(calc(18deg * var(--i)));
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 15px;
+                height: 15px;
+                border-radius: 50%;
+                background: #00ff0a;
+                box-shadow: 0 0 10px #00ff0a,
+                            0 0 20px #00ff0a,
+                            0 0 40px #00ff0a,
+                            0 0 60px #00ff0a,
+                            0 0 80px #00ff0a,
+                            0 0 100px #00ff0a;
+                animation: loadingAnimation 2s linear infinite;
+                animation-delay: calc(.1s * var(--i));
+            }
+        }
+    }
+}
+
+@keyframes bgAnimation {
+    0% {
+        filter: hue-rotate(0deg);
+    }
+
+    100% {
+        filter: hue-rotate(360deg);
+    }
+}
+
+@keyframes loadingAnimation {
+    0% {
+        transform: scale(1);
+    }
+
+    80%,100% {
+        transform: scale(0);
+    }
+}
diff --git a/index.html b/index.html
@@ -523,6 +523,11 @@ <h1 class="heading bottom-margin--small">CSS & JS</h1>
                 List Item Hover Effect
             </a>
         </li>
+        <li class="project">
+            <a target="_blank" href="./CSS-Projects/loading-animation/index.html">
+                Loading Animation
+            </a>
+        </li>
 
         <li class="project">
             <a target="_blank" href="./CSS-Projects/menu-item-hover-effect-multi-text/index.html">
@@ -796,6 +801,8 @@ <h1 class="heading bottom-margin--small">CSS & JS</h1>
             <li class="project"><a target="_blank" href="./CSS-Projects"></a></li>
             <li class="project"><a target="_blank" href="./CSS-Projects"></a></li>
             <li class="project"><a target="_blank" href="./CSS-Projects"></a></li>
+            <li class="project"><a target="_blank" href="./CSS-Projects"></a></li>
+            <li class="project"><a target="_blank" href="./CSS-Projects"></a></li>
         -->