Loader by harman-kanda

1/* From cssbuttons.io by @harmankanda.github.io/New */
2
3.pl {
4 width: 5em;
5 height: 5em;
6}
7
8.pl circle {
9 transform-box: fill-box;
10 transform-origin: 50% 50%;
11}
12
13.pl__ring1 {
14 animation: ring1 4s 0s ease-in-out infinite;
15}
16
17.pl__ring2 {
18 animation: ring2 4s 0.04s ease-in-out infinite;
19}
20
21.pl__ring3 {
22 animation: ring3 4s 0.08s ease-in-out infinite;
23}
24
25.pl__ring4 {
26 animation: ring4 4s 0.12s ease-in-out infinite;
27}
28
29.pl__ring5 {
30 animation: ring5 4s 0.16s ease-in-out infinite;
31}
32
33.pl__ring6 {
34 animation: ring6 4s 0.2s ease-in-out infinite;
35}
36
37/* Animations */
38@keyframes ring1 {
39 from {
40  stroke-dashoffset: -376.237129776;
41  transform: rotate(-0.25turn);
42  animation-timing-function: ease-in;
43 }
44
45 23% {
46  stroke-dashoffset: -94.247778;
47  transform: rotate(1turn);
48  animation-timing-function: ease-out;
49 }
50
51 46%, 50% {
52  stroke-dashoffset: -376.237129776;
53  transform: rotate(2.25turn);
54  animation-timing-function: ease-in;
55 }
56
57 73% {
58  stroke-dashoffset: -94.247778;
59  transform: rotate(3.5turn);
60  animation-timing-function: ease-out;
61 }
62
63 96%, to {
64  stroke-dashoffset: -376.237129776;
65  transform: rotate(4.75turn);
66 }
67}
68
69@keyframes ring2 {
70 from {
71  stroke-dashoffset: -329.207488554;
72  transform: rotate(-0.25turn);
73  animation-timing-function: ease-in;
74 }
75
76 23% {
77  stroke-dashoffset: -82.46680575;
78  transform: rotate(1turn);
79  animation-timing-function: ease-out;
80 }
81
82 46%, 50% {
83  stroke-dashoffset: -329.207488554;
84  transform: rotate(2.25turn);
85  animation-timing-function: ease-in;
86 }
87
88 73% {
89  stroke-dashoffset: -82.46680575;
90  transform: rotate(3.5turn);
91  animation-timing-function: ease-out;
92 }
93
94 96%, to {
95  stroke-dashoffset: -329.207488554;
96  transform: rotate(4.75turn);
97 }
98}
99
100@keyframes ring3 {
101 from {
102  stroke-dashoffset: -288.4484661616;
103  transform: rotate(-0.25turn);
104  animation-timing-function: ease-in;
105 }
106
107 23% {
108  stroke-dashoffset: -72.2566298;
109  transform: rotate(1turn);
110  animation-timing-function: ease-out;
111 }
112
113 46%, 50% {
114  stroke-dashoffset: -288.4484661616;
115  transform: rotate(2.25turn);
116  animation-timing-function: ease-in;
117 }
118
119 73% {
120  stroke-dashoffset: -72.2566298;
121  transform: rotate(3.5turn);
122  animation-timing-function: ease-out;
123 }
124
125 96%, to {
126  stroke-dashoffset: -288.4484661616;
127  transform: rotate(4.75turn);
128 }
129}
130
131@keyframes ring4 {
132 from {
133  stroke-dashoffset: -253.9600625988;
134  transform: rotate(-0.25turn);
135  animation-timing-function: ease-in;
136 }
137
138 23% {
139  stroke-dashoffset: -63.61725015;
140  transform: rotate(1turn);
141  animation-timing-function: ease-out;
142 }
143
144 46%, 50% {
145  stroke-dashoffset: -253.9600625988;
146  transform: rotate(2.25turn);
147  animation-timing-function: ease-in;
148 }
149
150 73% {
151  stroke-dashoffset: -63.61725015;
152  transform: rotate(3.5turn);
153  animation-timing-function: ease-out;
154 }
155
156 96%, to {
157  stroke-dashoffset: -253.9600625988;
158  transform: rotate(4.75turn);
159 }
160}
161
162@keyframes ring5 {
163 from {
164  stroke-dashoffset: -225.7422778656;
165  transform: rotate(-0.25turn);
166  animation-timing-function: ease-in;
167 }
168
169 23% {
170  stroke-dashoffset: -56.5486668;
171  transform: rotate(1turn);
172  animation-timing-function: ease-out;
173 }
174
175 46%, 50% {
176  stroke-dashoffset: -225.7422778656;
177  transform: rotate(2.25turn);
178  animation-timing-function: ease-in;
179 }
180
181 73% {
182  stroke-dashoffset: -56.5486668;
183  transform: rotate(3.5turn);
184  animation-timing-function: ease-out;
185 }
186
187 96%, to {
188  stroke-dashoffset: -225.7422778656;
189  transform: rotate(4.75turn);
190 }
191}
192
193@keyframes ring6 {
194 from {
195  stroke-dashoffset: -203.795111962;
196  transform: rotate(-0.25turn);
197  animation-timing-function: ease-in;
198 }
199
200 23% {
201  stroke-dashoffset: -51.05087975;
202  transform: rotate(1turn);
203  animation-timing-function: ease-out;
204 }
205
206 46%, 50% {
207  stroke-dashoffset: -203.795111962;
208  transform: rotate(2.25turn);
209  animation-timing-function: ease-in;
210 }
211
212 73% {
213  stroke-dashoffset: -51.05087975;
214  transform: rotate(3.5turn);
215  animation-timing-function: ease-out;
216 }
217
218 96%, to {
219  stroke-dashoffset: -203.795111962;
220  transform: rotate(4.75turn);
221 }
222}