🎨 ms-like

gaoryrt · Jul 3, 2019 · 79d32cb · 79d32cb
1 parent 4674588
commit 79d32cb
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,6 @@ Super simple indicators for loading.
 [![](./ios-like1.gif)](./ios-like1.html)
 ----
 
-
 ### ios-like(2)
 ![](https://img.badgesize.io/gaoryrt/minimal-loading/master/ios-like2.html)
 [![](./ios-like2.gif)](./ios-like2.html)
@@ -16,3 +15,8 @@ Super simple indicators for loading.
 ### chrome-like
 ![](https://img.badgesize.io/gaoryrt/minimal-loading/master/chrome-like.html)
 [![](./chrome-like.gif)](./chrome-like.html)
+----
+
+### ms-like
+![](https://img.badgesize.io/gaoryrt/minimal-loading/master/ms-like.html)
+[![](./ms-like.gif)](./ms-like.html)
diff --git a/chrome-like.html b/chrome-like.html
@@ -12,42 +12,17 @@
         background: #000;
         transition: all .3s
       }
-
       .L svg {
         position: absolute;
         top: calc(50% - 12px);
         left: calc(50% - 12px);
         height: 24px;
         width: 24px;
       }
-
       .path {
-        -webkit-animation: dash 3s linear infinite;
-        animation: dash 3s linear infinite;
+        animation: A 3s linear infinite;
       }
-      @-webkit-keyframes dash {
-        0% {
-          stroke-dasharray: 50 12.8;
-          stroke-dashoffset: 0;
-        }
-        25% {
-          stroke-dasharray: 4 58.8;
-          stroke-dashoffset: -68.5px;
-        }
-        50% {
-          stroke-dasharray: 50 12.8;
-          stroke-dashoffset: -94px;
-        }
-        75% {
-          stroke-dasharray: 4 58.8;
-          stroke-dashoffset: -162.4px;
-        }
-        to {
-          stroke-dasharray: 50 12.8;
-          stroke-dashoffset: -188.4px;
-        }
-      }
-      @keyframes dash {
+      @keyframes A {
         0% {
           stroke-dasharray: 50 12.8;
           stroke-dashoffset: 0;

diff --git a/ios-like1.html b/ios-like1.html
@@ -21,12 +21,7 @@
     }
     .L svg path {
       opacity: .2;
-      -webkit-animation: .8s calc(var(--d) * .1s) A infinite;
-              animation: .8s calc(var(--d) * .1s) A infinite
-    }
-    @-webkit-keyframes A {
-      0% {opacity: 1}
-      to {opacity: .2}
+      animation: .8s calc(var(--d) * .1s) A infinite
     }
     @keyframes A {
       0% {opacity: 1}

diff --git a/ios-like2.html b/ios-like2.html
@@ -21,12 +21,7 @@
     }
     .L svg path {
       opacity: .2;
-      -webkit-animation: 1.2s calc(var(--d) * .1s) A infinite;
-              animation: 1.2s calc(var(--d) * .1s) A infinite
-    }
-    @-webkit-keyframes A {
-      0% {opacity: 1}
-      to {opacity: .2}
+      animation: 1.2s calc(var(--d) * .1s) A infinite
     }
     @keyframes A {
       0% {opacity: 1}

diff --git a/ms-like.gif b/ms-like.gif
diff --git a/ms-like.html b/ms-like.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .L {
+      position: fixed;
+      pointer-events: none;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      background: #000;
+      transition: all .3s
+    }
+    .d {
+      position: absolute;
+      top: calc(50% - 2px);
+      left: -4px;
+      height: 4px;
+      width: 4px;
+      background: #fff;
+      animation: A 4s cubic-bezier(0, .8, 1, .2) calc(var(--d) * .2s) infinite;
+    }
+    @keyframes A {
+      50%, to {
+        transform: translateX(calc(100vw + 4px));
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="L">
+    <div style="--d:1" class="d"></div>
+    <div style="--d:2" class="d"></div>
+    <div style="--d:3" class="d"></div>
+    <div style="--d:4" class="d"></div>
+    <div style="--d:5" class="d"></div>
+    <div style="--d:6" class="d"></div>
+    <div style="--d:7" class="d"></div>
+  </div>
+</body>
+</html>