Loader by rillala

1.spinner {
2  position: absolute;
3  width: 25px;
4  height: 40px;
5}
6
7.spinner div {
8  position: absolute;
9  width: 50%;
10  height: 150%;
11  background: transparent;
12  transform: rotate(calc(var(--rotation) * 1deg))
13    translate(0, calc(var(--translation) * 1%));
14  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
15  color: #3eb3c2;
16  text-align: end;
17  font-weight: 700;
18  font-size: 20px;
19}
20
21.spinner div:nth-child(1) {
22  --delay: 0.1;
23  --rotation: 36;
24  --translation: 150;
25}
26
27.spinner .middle {
28  position: relative;
29  background: transparent;
30  top: 15px;
31  left: -30px;
32  color: #f09f9f;
33}
34
35.spinner div:nth-child(2) {
36  --delay: 0.2;
37  --rotation: 72;
38  --translation: 150;
39}
40
41.spinner div:nth-child(3) {
42  --delay: 0.3;
43  --rotation: 108;
44  --translation: 150;
45}
46
47.spinner div:nth-child(4) {
48  --delay: 0.4;
49  --rotation: 144;
50  --translation: 150;
51}
52
53.spinner div:nth-child(5) {
54  --delay: 0.5;
55  --rotation: 180;
56  --translation: 150;
57}
58
59.spinner div:nth-child(6) {
60  --delay: 0.6;
61  --rotation: 216;
62  --translation: 150;
63}
64
65.spinner div:nth-child(7) {
66  --delay: 0.7;
67  --rotation: 252;
68  --translation: 150;
69}
70
71.spinner div:nth-child(8) {
72  --delay: 0.8;
73  --rotation: 288;
74  --translation: 150;
75}
76
77.spinner div:nth-child(9) {
78  --delay: 0.9;
79  --rotation: 324;
80  --translation: 150;
81}
82
83.spinner div:nth-child(10) {
84  --delay: 1;
85  --rotation: 360;
86  --translation: 150;
87}
88
89div.icon-1,
90div.icon-2 {
91  background: transparent;
92}
93
94.icon-1 svg {
95  transform: rotate(180deg);
96  position: relative;
97  left: -15px;
98}
99
100.icon-2 svg {
101  position: relative;
102  left: -15px;
103}
104
105@keyframes spinner-fzua35 {
106  0%,
107  10%,
108  20%,
109  30%,
110  50%,
111  60%,
112  70%,
113  80%,
114  90%,
115  100% {
116    transform: rotate(calc(var(--rotation) * 1deg))
117      translate(0, calc(var(--translation) * 1%));
118  }
119
120  50% {
121    transform: rotate(calc(var(--rotation) * 1deg))
122      translate(0, calc(var(--translation) * 1.5%));
123  }
124}
125