Gradient Loader

pulkit-30 · Oct 5, 2021 · 6589eb5 · 6589eb5
1 parent 00f7456
commit 6589eb5
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 1 deletion.
diff --git a/Neumorphism gradient loader/image.jpg b/Neumorphism gradient loader/image.jpg
diff --git a/Neumorphism gradient loader/index.html b/Neumorphism gradient loader/index.html
@@ -0,0 +1,30 @@
+<!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" />
+    <title>Neumorphism Gradient Loader</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="loader">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+    <footer>
+      <div>
+        <p>
+          Credit:-
+          <a href="https://github.com/Lavish-Bansal" class="atag" target="/"
+            >Lavish Bansal</a
+          >
+        </p>
+      </div>
+      <div class="date">Date:- 03-10-2021</div>
+    </footer>
+  </body>
+</html>
diff --git a/Neumorphism gradient loader/readme.md b/Neumorphism gradient loader/readme.md
@@ -0,0 +1,2 @@
+# Neumorphism Gradient Loader
+<img src="./image.jpg"/>
diff --git a/Neumorphism gradient loader/style.css 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
@@ -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)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Neumorphism Gradient Loader
		<img src="./image.jpg"/>