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: #f49725;
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: #f42582;
27}
28
29/* Animations */
30@keyframes ringA {
31  from, 4% {
32    stroke-dasharray: 0 660;
33    stroke-width: 20;
34    stroke-dashoffset: -330;
35  }
36
37  12% {
38    stroke-dasharray: 60 600;
39    stroke-width: 30;
40    stroke-dashoffset: -335;
41  }
42
43  32% {
44    stroke-dasharray: 60 600;
45    stroke-width: 30;
46    stroke-dashoffset: -595;
47  }
48
49  40%, 54% {
50    stroke-dasharray: 0 660;
51    stroke-width: 20;
52    stroke-dashoffset: -660;
53  }
54
55  62% {
56    stroke-dasharray: 60 600;
57    stroke-width: 30;
58    stroke-dashoffset: -665;
59  }
60
61  82% {
62    stroke-dasharray: 60 600;
63    stroke-width: 30;
64    stroke-dashoffset: -925;
65  }
66
67  90%, to {
68    stroke-dasharray: 0 660;
69    stroke-width: 20;
70    stroke-dashoffset: -990;
71  }
72}
73
74@keyframes ringB {
75  from, 12% {
76    stroke-dasharray: 0 220;
77    stroke-width: 20;
78    stroke-dashoffset: -110;
79  }
80
81  20% {
82    stroke-dasharray: 20 200;
83    stroke-width: 30;
84    stroke-dashoffset: -115;
85  }
86
87  40% {
88    stroke-dasharray: 20 200;
89    stroke-width: 30;
90    stroke-dashoffset: -195;
91  }
92
93  48%, 62% {
94    stroke-dasharray: 0 220;
95    stroke-width: 20;
96    stroke-dashoffset: -220;
97  }
98
99  70% {
100    stroke-dasharray: 20 200;
101    stroke-width: 30;
102    stroke-dashoffset: -225;
103  }
104
105  90% {
106    stroke-dasharray: 20 200;
107    stroke-width: 30;
108    stroke-dashoffset: -305;
109  }
110
111  98%, to {
112    stroke-dasharray: 0 220;
113    stroke-width: 20;
114    stroke-dashoffset: -330;
115  }
116}
117
118@keyframes ringC {
119  from {
120    stroke-dasharray: 0 440;
121    stroke-width: 20;
122    stroke-dashoffset: 0;
123  }
124
125  8% {
126    stroke-dasharray: 40 400;
127    stroke-width: 30;
128    stroke-dashoffset: -5;
129  }
130
131  28% {
132    stroke-dasharray: 40 400;
133    stroke-width: 30;
134    stroke-dashoffset: -175;
135  }
136
137  36%, 58% {
138    stroke-dasharray: 0 440;
139    stroke-width: 20;
140    stroke-dashoffset: -220;
141  }
142
143  66% {
144    stroke-dasharray: 40 400;
145    stroke-width: 30;
146    stroke-dashoffset: -225;
147  }
148
149  86% {
150    stroke-dasharray: 40 400;
151    stroke-width: 30;
152    stroke-dashoffset: -395;
153  }
154
155  94%, to {
156    stroke-dasharray: 0 440;
157    stroke-width: 20;
158    stroke-dashoffset: -440;
159  }
160}
161
162@keyframes ringD {
163  from, 8% {
164    stroke-dasharray: 0 440;
165    stroke-width: 20;
166    stroke-dashoffset: 0;
167  }
168
169  16% {
170    stroke-dasharray: 40 400;
171    stroke-width: 30;
172    stroke-dashoffset: -5;
173  }
174
175  36% {
176    stroke-dasharray: 40 400;
177    stroke-width: 30;
178    stroke-dashoffset: -175;
179  }
180
181  44%, 50% {
182    stroke-dasharray: 0 440;
183    stroke-width: 20;
184    stroke-dashoffset: -220;
185  }
186
187  58% {
188    stroke-dasharray: 40 400;
189    stroke-width: 30;
190    stroke-dashoffset: -225;
191  }
192
193  78% {
194    stroke-dasharray: 40 400;
195    stroke-width: 30;
196    stroke-dashoffset: -395;
197  }
198
199  86%, to {
200    stroke-dasharray: 0 440;
201    stroke-width: 20;
202    stroke-dashoffset: -440;
203  }
204}