Loader by Lissy2019

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, dashOffset 2s linear infinite;
20}
21
22.spin {
23  animation: spinDashArray 2s ease-in-out infinite, spin 8s ease-in-out infinite,
24    dashOffset 2s linear infinite;
25  transform-origin: center;
26}
27
28@keyframes dashArray {
29  0% {
30    stroke-dasharray: 0 1 359 0;
31  }
32
33  50% {
34    stroke-dasharray: 0 359 1 0;
35  }
36
37  100% {
38    stroke-dasharray: 359 1 0 0;
39  }
40}
41
42@keyframes spinDashArray {
43  0% {
44    stroke-dasharray: 270 90;
45  }
46
47  50% {
48    stroke-dasharray: 0 360;
49  }
50
51  100% {
52    stroke-dasharray: 250 90;
53  }
54}
55
56@keyframes dashOffset {
57  0% {
58    stroke-dashoffset: 385;
59  }
60
61  100% {
62    stroke-dashoffset: 5;
63  }
64}
65
66@keyframes spin {
67  0% {
68    rotate: 0deg;
69  }
70
71  12.5%,
72  25% {
73    rotate: 270deg;
74  }
75
76  37.5%,
77  50% {
78    rotate: 540deg;
79  }
80
81  62.5%,
82  75% {
83    rotate: 810deg;
84  }
85
86  87.5%,
87  100% {
88    rotate: 1080deg;
89  }
90}
91