1.spinner {
2  position: absolute;
3  width: 9px;
4  height: 9px;
5}
6
7.spinner div {
8  position: absolute;
9  width: 50%;
10  height: 150%;
11  background: #000000;
12  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
13  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
14}
15
16.spinner div:nth-child(1) {
17  --delay: 0.1;
18  --rotation: 36;
19  --translation: 150;
20}
21
22.spinner div:nth-child(2) {
23  --delay: 0.2;
24  --rotation: 72;
25  --translation: 150;
26}
27
28.spinner div:nth-child(3) {
29  --delay: 0.3;
30  --rotation: 108;
31  --translation: 150;
32}
33
34.spinner div:nth-child(4) {
35  --delay: 0.4;
36  --rotation: 144;
37  --translation: 150;
38}
39
40.spinner div:nth-child(5) {
41  --delay: 0.5;
42  --rotation: 180;
43  --translation: 150;
44}
45
46.spinner div:nth-child(6) {
47  --delay: 0.6;
48  --rotation: 216;
49  --translation: 150;
50}
51
52.spinner div:nth-child(7) {
53  --delay: 0.7;
54  --rotation: 252;
55  --translation: 150;
56}
57
58.spinner div:nth-child(8) {
59  --delay: 0.8;
60  --rotation: 288;
61  --translation: 150;
62}
63
64.spinner div:nth-child(9) {
65  --delay: 0.9;
66  --rotation: 324;
67  --translation: 150;
68}
69
70.spinner div:nth-child(10) {
71  --delay: 1;
72  --rotation: 360;
73  --translation: 150;
74}
75
76@keyframes spinner-fzua35 {
77  0%, 10%, 20%, 30%, 50%, 60%, 70%, 80%, 90%, 100% {
78    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
79  }
80
81  50% {
82    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
83  }
84}