1.container {
2  overflow: hidden;
3}
4
5.container svg {
6  --spin-duration: 2000ms;
7  --infinity-duration: 2000ms;
8  --hsl-base-h: 5deg;
9  --hsl-base-s: 70%;
10  --hsl-base-l: 50%;
11  animation: spin81213 var(--spin-duration) linear infinite;
12}
13
14.eight {
15  --eight-length-px: 60.84563446044922px;
16 /* As seen on getTotalLength */
17  --offset: calc(var(--order) * 5px);
18  animation: infinity8123 var(--infinity-duration) linear infinite;
19  d: path("m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10");
20  fill: none;
21  stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));
22  stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);
23  stroke-linecap: round;
24  stroke-width: calc(1 - var(--order) / 10);
25}
26
27@keyframes infinity8123 {
28  0% {
29    stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));
30  }
31
32  100% {
33    stroke-dashoffset: var(--offset);
34  }
35}
36
37@keyframes spin81213 {
38  0% {
39    transform: rotate(0)
40  }
41
42  100% {
43    transform: rotate(360deg)
44  }
45}