diff --git a/Neumorphism gradient loader/image.jpg b/Neumorphism gradient loader/image.jpg new file mode 100644 index 0000000..a1458b6 Binary files /dev/null and b/Neumorphism gradient loader/image.jpg differ 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)