minimal-loading/html/ios-like1.html at master · gaoryrt/minimal-loading · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <body>
    <svg width="42px" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22 22">
      <style>
        svg {
          animation: A 1.2s steps(8) infinite;
        }
        @keyframes A {
          to {
            transform: rotate(1turn);
          }
        }
      </style>
      <g stroke="#FFF" stroke-width="2" stroke-linecap="round">
        <path stroke="#000" d="M11 1v4" />
        <path stroke="#222" d="M3.93 3.93l2.83 2.83" />
        <path stroke="#444" d="M1 11h4" />
        <path stroke="#666" d="M3.93 18.07l2.83-2.83" />
        <path stroke="#888" d="M11 17v4" />
        <path stroke="#aaa" d="M15.24 15.24l2.83 2.83" />
        <path stroke="#ccc" d="M17 11h4" />
        <path stroke="#eee" d="M15.24 6.76l2.83-2.83" />
      </g>
    </svg>
  </body>
</html>