1svg {
2 width: 3.25em;
3 transform-origin: center;
4 animation: rotate4 2s linear infinite;
5}
6
7circle {
8 fill: none;
9 stroke: hsl(214, 97%, 59%);
10 stroke-width: 2;
11 stroke-dasharray: 1, 200;
12 stroke-dashoffset: 0;
13 stroke-linecap: round;
14 animation: dash4 1.5s ease-in-out infinite;
15}
16
17@keyframes rotate4 {
18 100% {
19  transform: rotate(360deg);
20 }
21}
22
23@keyframes dash4 {
24 0% {
25  stroke-dasharray: 1, 200;
26  stroke-dashoffset: 0;
27 }
28
29 50% {
30  stroke-dasharray: 90, 200;
31  stroke-dashoffset: -35px;
32 }
33
34 100% {
35  stroke-dashoffset: -125px;
36 }
37}
38