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