✨ ios-like 2.1

gaoryrt · Oct 21, 2019 · ef64bc4 · ef64bc4
1 parent 39c937e
commit ef64bc4
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,11 @@ Super simple indicators for loading.
 [![](./gif/ios-like2.gif)](./html/ios-like2.html)
 ----
 
+### ios-like(2.1)
+![](https://img.badgesize.io/gaoryrt/minimal-loading/master/html/ios-like2.1.html)
+[![](./gif/ios-like2.1.gif)](./html/ios-like2.1.html)
+----
+
 ### chrome-like
 ![](https://img.badgesize.io/gaoryrt/minimal-loading/master/html/chrome-like.html)
 [![](./gif/chrome-like.gif)](./html/chrome-like.html)

diff --git a/gif/ios-like2.1.gif b/gif/ios-like2.1.gif
diff --git a/html/ios-like2.1.html b/html/ios-like2.1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .L {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background: #000;
+    }
+    .L svg {
+      position: absolute;
+      top: calc(50% - 11px);
+      left: calc(50% - 11px);
+      height: 22px;
+      width: 22px;
+      animation: A 1.2s steps(12) infinite
+    }
+    @keyframes A {
+      to {transform: rotate(1turn)}
+    }
+  </style>
+</head>
+<body>
+  <div class="L">
+    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><g stroke="#fff" stroke-linecap="round" stroke-width="2">
+      <path stroke="#fff" d="M11 1v3"/>
+      <path stroke="#000" d="M16 2.34l-1.5 2.6"/>
+      <path stroke="#171717" d="M19.66 6l-2.6 1.5"/>
+      <path stroke="#2e2e2e" d="M18 11h3"/>
+      <path stroke="#454545" d="M17.06 14.5l2.6 1.5"/>
+      <path stroke="#5c5c5c" d="M14.5 17.06l1.5 2.6"/>
+      <path stroke="#737373" d="M11 18v3"/>
+      <path stroke="#8d8d8d" d="M7.5 17.06L6 19.66"/>
+      <path stroke="#a2a2a2" d="M4.94 14.5L2.34 16"/>
+      <path stroke="#b9b9b9" d="M1 11h3"/>
+      <path stroke="#d0d0d0" d="M2.34 6l2.6 1.5"/>
+      <path stroke="#e7e7e7" d="M6 2.34l1.5 2.6"/>
+    </g></svg>
+  </div>
+</body>
+</html>