Loader by SelfMadeSystem

1.absolute {
2  position: absolute;
3}
4
5.inline-block {
6  display: inline-block;
7}
8
9.loader {
10  display: flex;
11  margin: 0.25em 0;
12}
13
14.w-2 {
15  width: 0.5em;
16}
17
18.dash {
19  animation: dashArray 2s ease-in-out infinite,
20    dashOffset 2s linear infinite;
21}
22
23.spin {
24  animation: spinDashArray 2s ease-in-out infinite,
25    spin 8s ease-in-out infinite,
26    dashOffset 2s linear infinite;
27  transform-origin: center;
28}
29
30@keyframes dashArray {
31  0% {
32    stroke-dasharray: 0 1 359 0;
33  }
34
35  50% {
36    stroke-dasharray: 0 359 1 0;
37  }
38
39  100% {
40    stroke-dasharray: 359 1 0 0;
41  }
42}
43
44@keyframes spinDashArray {
45  0% {
46    stroke-dasharray: 270 90;
47  }
48
49  50% {
50    stroke-dasharray: 0 360;
51  }
52
53  100% {
54    stroke-dasharray: 270 90;
55  }
56}
57
58@keyframes dashOffset {
59  0% {
60    stroke-dashoffset: 365;
61  }
62
63  100% {
64    stroke-dashoffset: 5;
65  }
66}
67
68@keyframes spin {
69  0% {
70    rotate: 0deg;
71  }
72
73  12.5%,
74  25% {
75    rotate: 270deg;
76  }
77
78  37.5%,
79  50% {
80    rotate: 540deg;
81  }
82
83  62.5%,
84  75% {
85    rotate: 810deg;
86  }
87
88  87.5%,
89  100% {
90    rotate: 1080deg;
91  }
92}
93