Loading Css effect (#797)

Shailsharma2604 · web-flow · commit 2b63785c6435 · 2025-10-08T01:08:56.000+05:45
diff --git a/Loading Css effect/index.html b/Loading Css effect/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section>
+  <div class="loader">
+    
+    <div class="dot" style="--i:0"></div>
+    <div class="dot" style="--i:1"></div>
+    <div class="dot" style="--i:2"></div>
+    <div class="dot" style="--i:3"></div>
+    <div class="dot" style="--i:4"></div>
+    <div class="dot" style="--i:5"></div>
+    <div class="dot" style="--i:6"></div>
+    <div class="dot" style="--i:7"></div>
+    <div class="dot" style="--i:8"></div>
+    <div class="dot" style="--i:9"></div>
+  </div>
+  <h2>Loading...</h2>
+    <div class="loader">
+    
+    <div class="dot" style="--i:0"></div>
+    <div class="dot" style="--i:1"></div>
+    <div class="dot" style="--i:2"></div>
+    <div class="dot" style="--i:3"></div>
+    <div class="dot" style="--i:4"></div>
+    <div class="dot" style="--i:5"></div>
+    <div class="dot" style="--i:6"></div>
+    <div class="dot" style="--i:7"></div>
+    <div class="dot" style="--i:8"></div>
+    <div class="dot" style="--i:9"></div>
+  </div>
+</section>
+</body>
+</html>
diff --git a/Loading Css effect/style.css b/Loading Css effect/style.css
@@ -0,0 +1,75 @@
+*
+{
+  margin:0;
+  padding:0;
+  box-sizing:border-box;
+}
+
+section{
+  position:relative;
+  width:100%;
+  height:100vh;
+  display:flex;
+  justify-content:center;
+  align-items: center;
+  background:#001300;
+  flex-direction:column;
+  animation: changeColor 5s linear infinite;
+}
+@keyframes changeColor{
+  
+  0%{
+    filter: hue-rotate(0deg)
+  }
+   100%{
+    filter: hue-rotate(360deg)
+  }
+  
+}
+section h2{
+    color:#00ff0a;
+    font-family: consolas;
+    font-weight:300;
+    letter-spacing: 10px;
+}
+section .loader{
+  position:relative;
+  display:flex;
+}
+section .loader .dot{
+  position:relative;
+  display:block;
+  width: 20px;
+  height: 20px;
+  background:#00ff0a;
+  box-shadow: 0 0 10px #00ff0a,
+              0 0 20px #00ff0a,
+              0 0 40px #00ff0a,
+              0 0 60px #00ff0a,
+              0 0 80px #00ff0a,
+              0 0 100px #00ff0a;
+  margin: 20px 10px;
+  transform:scale(0.1);
+  border-radius:50%;
+  animation: animateDot 2s linear infinite;
+  animation-delay:calc(0.1s * var(--i));
+}
+section .loader:last-child .dot{
+    animation-delay:calc(-0.1s * var(--i));
+}
+
+
+@keyframes animateDot{
+
+  0%{
+    transform:scale(0.1);
+  }
+  
+  10%{
+    transform:scale(1);
+  }
+  50%,100%{
+    transform:scale(0.1);
+  }
+
+}
diff --git a/README.md b/README.md
@@ -68,6 +68,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 - [Jumping Ball](#jumping-ball)
 - [Light Bulb Animation](#light-bulb-animation)
 - [Loaders](#loaders)
+- [Loading_Css_effect](#Loading-Css-effect)
 - [MasterCard](#mastercard)
 - [Mobile Menu Off Canvas](#mobile-menu-off-canvas)
 - [Modal/Popup](#modalpopup)
@@ -774,6 +775,14 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 
 ---
 
+## <a id="Loading Css effect"></a>Loading Css effect
+
+<img src="images/Loading_Css_effect.gif" height="230" title="Loading Css effect">
+
+**[⬆ back to top](#quick-links)**
+
+---
+
 ## <a id="city-animation-footer"></a>City animation footer
 
 [<img src="images/City animation footer.gif" height="230" title="City animation footer">](https://github.com/Dreadlord075/You-Dont-Need-JavaScript/blob/d581e4061af20aa2e2dbf0c11a8860c3fe768245/images/City%20animation%20footer.gif)
diff --git a/images/Loading_Css_effect.gif b/images/Loading_Css_effect.gif
