🎨 spectrum2

gaoryrt · Jul 4, 2019 · b5f27df · b5f27df
1 parent 1bfa21e
commit b5f27df
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Super simple indicators for loading.
 
-### ios-like(1)
+### ios-like
 ![](https://img.badgesize.io/gaoryrt/minimal-loading/master/html/ios-like1.html)
 [![](./gif/ios-like1.gif)](./html/ios-like1.html)
 ----
@@ -27,6 +27,11 @@ Super simple indicators for loading.
 [![](./gif/spectrum.gif)](./html/spectrum.html)
 ----
 
+### spectrum(2)
+![](https://img.badgesize.io/gaoryrt/minimal-loading/master/html/spectrum2.html)
+[![](./gif/spectrum2.gif)](./html/spectrum2.html)
+----
+
 ### windows
 ![](https://img.badgesize.io/gaoryrt/minimal-loading/master/html/windows.html)
 [![](./gif/windows.gif)](./html/windows.html)

diff --git a/gif/spectrum2.gif b/gif/spectrum2.gif
diff --git a/html/spectrum2.html b/html/spectrum2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .L {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background: #000;
+    }
+    .r,
+    .g,
+    .b {
+      top: calc(50% - 11px);
+      left: calc(50% - 11px);
+      position: absolute;
+      transform-origin: 50% 0;
+      height: 22px;
+      width: 22px;
+      border-radius: 100%;
+      mix-blend-mode: exclusion;
+      animation: A 2s cubic-bezier(0, .9, 1, .1) calc(var(--c) * -.1s) infinite;
+    }
+    .r {
+      background: #F00;
+    }
+    .g {
+      background: #0F0;
+    }
+    .b {
+      background: #00F;
+    }
+    @keyframes A {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="L">
+    <div style="--c:3" class="b"></div>
+    <div style="--c:2" class="g"></div>
+    <div style="--c:1" class="r"></div>
+  </div>
+</body>
+</html>