1.pl {
2  display: block;
3  width: 9.375em;
4  height: 9.375em;
5}
6
7.pl__arrows,
8.pl__ring-rotate,
9.pl__ring-stroke,
10.pl__tick {
11  animation-duration: 2s;
12  animation-timing-function: linear;
13  animation-iteration-count: infinite;
14}
15
16.pl__arrows {
17  animation-name: arrows42;
18  transform: rotate(45deg);
19  transform-origin: 16px 52px;
20}
21
22.pl__ring-rotate,
23.pl__ring-stroke {
24  transform-origin: 80px 80px;
25}
26
27.pl__ring-rotate {
28  animation-name: ringRotate42;
29}
30
31.pl__ring-stroke {
32  animation-name: ringStroke42;
33  transform: rotate(-45deg);
34}
35
36.pl__tick {
37  animation-name: tick42;
38}
39
40.pl__tick:nth-child(2) {
41  animation-delay: -1.75s;
42}
43
44.pl__tick:nth-child(3) {
45  animation-delay: -1.5s;
46}
47
48.pl__tick:nth-child(4) {
49  animation-delay: -1.25s;
50}
51
52.pl__tick:nth-child(5) {
53  animation-delay: -1s;
54}
55
56.pl__tick:nth-child(6) {
57  animation-delay: -0.75s;
58}
59
60.pl__tick:nth-child(7) {
61  animation-delay: -0.5s;
62}
63
64.pl__tick:nth-child(8) {
65  animation-delay: -0.25s;
66}
67
68/* Animations */
69@keyframes arrows42 {
70  from {
71    transform: rotate(45deg);
72  }
73
74  to {
75    transform: rotate(405deg);
76  }
77}
78
79@keyframes ringRotate42 {
80  from {
81    transform: rotate(0);
82  }
83
84  to {
85    transform: rotate(720deg);
86  }
87}
88
89@keyframes ringStroke42 {
90  from,
91	to {
92    stroke-dashoffset: 452;
93    transform: rotate(-45deg);
94  }
95
96  50% {
97    stroke-dashoffset: 169.5;
98    transform: rotate(-180deg);
99  }
100}
101
102@keyframes tick42 {
103  from,
104	3%,
105	47%,
106	to {
107    stroke-dashoffset: -12;
108  }
109
110  14%,
111	36% {
112    stroke-dashoffset: 0;
113  }
114}