Merge pull request #792 from Shailsharma2604/master

aayush105 · web-flow · commit 22ad08752f1a · 2025-10-07T12:03:09.000+05:45
Tri Color Loader
diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 - [Tooltips](#tooltips)
 - [Treeview](#treeview)
 - [Twitter Heart Animation](#twitter-heart-animation)
+- [Tri Color Loader](#Tri-Color-Loader)
 - [Book Animation](#book-animation)
 - [Zomato](#zomato)
 - [Zoom When Hover](#zoom-when-hover)
@@ -538,6 +539,15 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 
 ---
 
+
+## <a id="Tri_Color_Loader"></a>Tri Color Loader
+
+[<img src="images/tri_color_loader.gif" height="230" title="Demo">](https://codepen.io/shail2604/pen/raxLgbo)
+
+**[⬆ back to top](#quick-links)**
+
+---
+
 ## <a id="BookAnimation"></a>Book Animation
 
 [<img src="images/book_animation.gif" height="350" title="Book Animation">](https://codepen.io/Paras-Shenmare/pen/eYxJpQB)
diff --git a/Tri color loader/index.html b/Tri color loader/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="circle" style="--index: 0;"></div>
+    <div class="circle" style="--index: 1;"></div>
+    <div class="circle" style="--index: 2;"></div>
+    <div class="circle" style="--index: 3;"></div>
+    <div class="circle" style="--index: 4;"></div>
+    <div class="circle" style="--index: 5;"></div>
+    <div class="circle" style="--index: 6;"></div>
+    <div class="circle" style="--index: 7;"></div>
+    <div class="circle" style="--index: 8;"></div>
+    <div class="circle" style="--index: 9;"></div>
+    <div class="circle" style="--index: 10;"></div>
+    <div class="circle" style="--index: 11;"></div>
+    <div class="circle" style="--index: 12;"></div>
+    <div class="circle" style="--index: 13;"></div>
+    <div class="circle" style="--index: 14;"></div>
+    <div class="circle" style="--index: 15;"></div>
+</body>
+</html>
diff --git a/Tri color loader/style.css b/Tri color loader/style.css
@@ -0,0 +1,53 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background: black;
+}
+.circle {
+  --number: 16;
+  --angle: calc(360deg / var(--number));
+  --hue: 160;
+  --thickness: 15px;
+  --length: calc(var(--thickness) * 10);
+  --distance: calc(var(--thickness) * -4);
+  --duration: 2s;
+
+  grid-area: 1/1;
+  width: var(--length);
+  height: var(--thickness);
+  border-radius: calc(var(--thickness) / 2);
+  background: hsl(160, 100%, 51%);
+  transform: rotate(calc(var(--index) * var(--angle)))
+    translateY(var(--distance));
+  animation: changeColor calc(var(--duration) * 1) linear infinite,
+    changeOpacity var(--duration) linear infinite;
+  animation-delay: calc((var(--duration) / var(--number)) * var(--index) * 0.1),
+    calc((var(--duration) / var(--number)) * var(--index) * 0.5);
+  mix-blend-mode: plus-lighter;
+}
+@keyframes changeColor {
+  0%,
+  100% {
+    background: hsl(var(--hue), 100%, 51%);
+  }
+  50% {
+    background: hsl(calc(var(--hue) + 180), 100%, 51%);
+  }
+}
+@keyframes changeOpacity {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  /* NB : A small amount of opacity gives also good results */
+  30%,
+  80% {
+    opacity: 0;
+  }
+}
diff --git a/images/tri_color_loader.gif b/images/tri_color_loader.gif
