add loader glowing

pulkit-30 · Oct 8, 2021 · 8e0b1f3 · 8e0b1f3
1 parent 321cca9
commit 8e0b1f3
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -53,6 +53,7 @@
 | Neumorphism Gradient Loader   | https://lavishbansal17.github.io/Neumorphism-Gradient-Loader/           |
 | Card Flip on Hold             | https://gabrielgomeso.github.io/card_flip.html                          |
 | Credit Cards                  | https://iqbalutomo.github.io/credit-cards/                              |
+| Loader Glowing                | https://jonathanallisson.github.io/loader/                              |
 
 ---
 

diff --git a/loader-glowing/Readme.md b/loader-glowing/Readme.md
@@ -0,0 +1,3 @@
+# Loader glowing
+<img src="./loader.png">
+by [JonathanAllisson](https://github.com/JonathanAllisson)
diff --git a/loader-glowing/index.html b/loader-glowing/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+    <title>Loader</title>
+</head>
+<body>
+    <div class="loader">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+</body>
+</html>
diff --git a/loader-glowing/loader.png b/loader-glowing/loader.png
diff --git a/loader-glowing/styles.css b/loader-glowing/styles.css
@@ -0,0 +1,101 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #000;
+}
+
+.loader {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+
+.loader span {
+    position: absolute;
+    display: block;
+}
+
+.loader span:nth-child(1) {
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 40px;
+    background: linear-gradient(90deg, transparent, #03e9f4);
+    animation: animate1 1s linear infinite;
+    animation-delay: 0s;
+}
+
+@keyframes animate1 {
+    0% {
+        left: -100%;
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+.loader span:nth-child(3) {
+    bottom: 0;
+    left: -100%;
+    width: 100%;
+    height: 40px;
+    background: linear-gradient(270deg, transparent, #03e9f4);
+    animation: animate3 1s linear infinite;
+    animation-delay: 0s;
+}
+
+@keyframes animate3 {
+    0% {
+        left: 100%;
+    }
+    100% {
+        left: -100%;
+    }
+}
+
+.loader span:nth-child(2) {
+    right: 0;
+    top: -100%;
+    width: 40px;
+    height: 100%;
+    background: linear-gradient(180deg, transparent, #03e9f4);
+    animation: animate2 1s linear infinite;
+    animation-delay: 0.5s;
+}
+
+@keyframes animate2 {
+    0% {
+        top: -100%;
+    }
+    100% {
+        top: 100%;
+    }
+}
+
+.loader span:nth-child(4) {
+    left: 0;
+    top: 100%;
+    width: 40px;
+    height: 100%;
+    background: linear-gradient(0deg, transparent, #03e9f4);
+    animation: animate4 1s linear infinite;
+    animation-delay: 0.5s;
+}
+
+@keyframes animate4 {
+    0% {
+        top: 100%;
+    }
+    100% {
+        top: -100%;
+    }
+}