Loader by uxRakhal

1.pl {
2  width: 6em;
3  height: 6em;
4}
5
6.pl__ring {
7  animation: ringA 2s linear infinite;
8}
9
10.pl__ring--a {
11  stroke: #f42f25;
12}
13
14.pl__ring--b {
15  animation-name: ringB;
16  stroke: #ffdd00;
17}
18
19.pl__ring--c {
20  animation-name: ringC;
21  stroke: #255ff4;
22}
23
24.pl__ring--d {
25  animation-name: ringD;
26  stroke: #2cf425;
27}
28
29/* Animations */
30@keyframes ringA {
31  from,
32  4% {
33    stroke-dasharray: 0 660;
34    stroke-width: 20;
35    stroke-dashoffset: -330;
36  }
37
38  12% {
39    stroke-dasharray: 60 600;
40    stroke-width: 30;
41    stroke-dashoffset: -335;
42  }
43
44  32% {
45    stroke-dasharray: 60 600;
46    stroke-width: 30;
47    stroke-dashoffset: -595;
48  }
49
50  40%,
51  54% {
52    stroke-dasharray: 0 660;
53    stroke-width: 20;
54    stroke-dashoffset: -660;
55  }
56
57  62% {
58    stroke-dasharray: 60 600;
59    stroke-width: 30;
60    stroke-dashoffset: -665;
61  }
62
63  82% {
64    stroke-dasharray: 60 600;
65    stroke-width: 30;
66    stroke-dashoffset: -925;
67  }
68
69  90%,
70  to {
71    stroke-dasharray: 0 660;
72    stroke-width: 20;
73    stroke-dashoffset: -990;
74  }
75}
76
77@keyframes ringB {
78  from,
79  12% {
80    stroke-dasharray: 0 220;
81    stroke-width: 20;
82    stroke-dashoffset: -110;
83  }
84
85  20% {
86    stroke-dasharray: 20 200;
87    stroke-width: 30;
88    stroke-dashoffset: -115;
89  }
90
91  40% {
92    stroke-dasharray: 20 200;
93    stroke-width: 30;
94    stroke-dashoffset: -195;
95  }
96
97  48%,
98  62% {
99    stroke-dasharray: 0 220;
100    stroke-width: 20;
101    stroke-dashoffset: -220;
102  }
103
104  70% {
105    stroke-dasharray: 20 200;
106    stroke-width: 30;
107    stroke-dashoffset: -225;
108  }
109
110  90% {
111    stroke-dasharray: 20 200;
112    stroke-width: 30;
113    stroke-dashoffset: -305;
114  }
115
116  98%,
117  to {
118    stroke-dasharray: 0 220;
119    stroke-width: 20;
120    stroke-dashoffset: -330;
121  }
122}
123
124@keyframes ringC {
125  from {
126    stroke-dasharray: 0 440;
127    stroke-width: 20;
128    stroke-dashoffset: 0;
129  }
130
131  8% {
132    stroke-dasharray: 40 400;
133    stroke-width: 30;
134    stroke-dashoffset: -5;
135  }
136
137  28% {
138    stroke-dasharray: 40 400;
139    stroke-width: 30;
140    stroke-dashoffset: -175;
141  }
142
143  36%,
144  58% {
145    stroke-dasharray: 0 440;
146    stroke-width: 20;
147    stroke-dashoffset: -220;
148  }
149
150  66% {
151    stroke-dasharray: 40 400;
152    stroke-width: 30;
153    stroke-dashoffset: -225;
154  }
155
156  86% {
157    stroke-dasharray: 40 400;
158    stroke-width: 30;
159    stroke-dashoffset: -395;
160  }
161
162  94%,
163  to {
164    stroke-dasharray: 0 440;
165    stroke-width: 20;
166    stroke-dashoffset: -440;
167  }
168}
169
170@keyframes ringD {
171  from,
172  8% {
173    stroke-dasharray: 0 440;
174    stroke-width: 20;
175    stroke-dashoffset: 0;
176  }
177
178  16% {
179    stroke-dasharray: 40 400;
180    stroke-width: 30;
181    stroke-dashoffset: -5;
182  }
183
184  36% {
185    stroke-dasharray: 40 400;
186    stroke-width: 30;
187    stroke-dashoffset: -175;
188  }
189
190  44%,
191  50% {
192    stroke-dasharray: 0 440;
193    stroke-width: 20;
194    stroke-dashoffset: -220;
195  }
196
197  58% {
198    stroke-dasharray: 40 400;
199    stroke-width: 30;
200    stroke-dashoffset: -225;
201  }
202
203  78% {
204    stroke-dasharray: 40 400;
205    stroke-width: 30;
206    stroke-dashoffset: -395;
207  }
208
209  86%,
210  to {
211    stroke-dasharray: 0 440;
212    stroke-width: 20;
213    stroke-dashoffset: -440;
214  }
215}
216