From 6589eb5526b6c1d7f98063b1927288ead37f0589 Mon Sep 17 00:00:00 2001 From: Lavish Bansal Date: Tue, 5 Oct 2021 21:15:47 +0530 Subject: [PATCH] Gradient Loader --- Neumorphism gradient loader/image.jpg | Bin 0 -> 11457 bytes Neumorphism gradient loader/index.html | 30 +++++++++++ Neumorphism gradient loader/readme.md | 2 + Neumorphism gradient loader/style.css | 70 +++++++++++++++++++++++++ README.md | 3 +- 5 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 Neumorphism gradient loader/image.jpg create mode 100644 Neumorphism gradient loader/index.html create mode 100644 Neumorphism gradient loader/readme.md create mode 100644 Neumorphism gradient loader/style.css diff --git a/Neumorphism gradient loader/image.jpg b/Neumorphism gradient loader/image.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a1458b655fd2ccb1b461150a19b9c56cc5583aab GIT binary patch literal 11457 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 literal 0 HcmV?d00001 diff --git a/Neumorphism gradient loader/index.html b/Neumorphism gradient loader/index.html new file mode 100644 index 0000000..215ac55 --- /dev/null +++ b/Neumorphism gradient loader/index.html @@ -0,0 +1,30 @@ + + + + + + + Neumorphism Gradient Loader + + + +
+ + + + + +
+ + + diff --git a/Neumorphism gradient loader/readme.md b/Neumorphism gradient loader/readme.md new file mode 100644 index 0000000..7fbadcc --- /dev/null +++ b/Neumorphism gradient loader/readme.md @@ -0,0 +1,2 @@ +# Neumorphism Gradient Loader + \ No newline at end of file diff --git a/Neumorphism gradient loader/style.css b/Neumorphism gradient loader/style.css new file mode 100644 index 0000000..1f85ac9 --- /dev/null +++ b/Neumorphism gradient loader/style.css @@ -0,0 +1,70 @@ +* { + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #f1f1f1; +} + +.loader { + position: relative; + width: 200px; + height: 200px; + border: 4px solid #f1f1f1; + border-radius: 50%; + overflow: hidden; + box-shadow: -10px -10px 15px rgba(255, 255, 255, 1), + 10px 10px 10px rgba(0, 0, 0, 0.1), + inset -10px -10px 15px rgba(255, 255, 255, 0.5), + inset 10px 10px 10px rgba(0, 0, 0, 0.1); +} + +.loader::before { + content: ""; + position: absolute; + top: 25px; + left: 25px; + right: 25px; + bottom: 25px; + background: #f1f1f1; + border-radius: 50%; + border: 4px solid #f1f1f1; + box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), + inset 10px 10px 10px rgba(0, 0, 0, 0.1); +} + +.loader span { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); + z-index: -1; + filter: blur(20px); + animation: animate 0.5s linear infinite; +} + +@keyframes animate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +footer { + position: relative; + top: 19rem; + right: 709px; +} + +footer a { + text-decoration: none; + color: blue; +} diff --git a/README.md b/README.md index 879f81a..70aeaee 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,8 @@ | Automatic Image Slider Animation|https://palaksharma23.github.io/Automatic-Image-Changing-Animation/ | | Confetti Animation | https://anjali1102.github.io/confetti_animation/ | | Comets Animation | https://jonathanallisson.github.io/Comets/ | -| Glowing Dot Animation | https://lavishbansal17.github.io/Glowing-Dot-Animation/ | +| Glowing Dot Animation | https://lavishbansal17.github.io/Glowing-Dot-Animation/ | +| Neumorphism Gradient Loader | https://lavishbansal17.github.io/Neumorphism-Gradient-Loader/ | --- ![Project Intro Gif](./Gif.gif)