diff --git a/README.md b/README.md index c07a64a..12a5463 100644 --- 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 new file mode 100644 index 0000000..9ce5fe7 --- /dev/null +++ b/loader-glowing/Readme.md @@ -0,0 +1,3 @@ +# Loader glowing + +by [JonathanAllisson](https://github.com/JonathanAllisson) \ No newline at end of file diff --git a/loader-glowing/index.html b/loader-glowing/index.html new file mode 100644 index 0000000..6ca9962 --- /dev/null +++ b/loader-glowing/index.html @@ -0,0 +1,18 @@ + + + + + + + + Loader + + +
+ + + + +
+ + \ No newline at end of file diff --git a/loader-glowing/loader.png b/loader-glowing/loader.png new file mode 100644 index 0000000..f60b504 Binary files /dev/null and b/loader-glowing/loader.png differ diff --git a/loader-glowing/styles.css b/loader-glowing/styles.css new file mode 100644 index 0000000..b7a1a4a --- /dev/null +++ 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%; + } +} \ No newline at end of file