Loader by Erasmus001

1#wifi-loader {
2  --background: #62abff;
3  --front-color: #000;
4  --back-color: #c3c8de;
5  --text-color: #414856;
6  width: 64px;
7  height: 64px;
8  border-radius: 50px;
9  position: relative;
10  display: flex;
11  justify-content: center;
12  align-items: center;
13}
14
15#wifi-loader svg {
16  position: absolute;
17  display: flex;
18  justify-content: center;
19  align-items: center;
20}
21
22#wifi-loader svg circle {
23  position: absolute;
24  fill: none;
25  stroke-width: 6px;
26  stroke-linecap: round;
27  stroke-linejoin: round;
28  transform: rotate(-100deg);
29  transform-origin: center;
30}
31
32#wifi-loader svg circle.back {
33  stroke: var(--back-color);
34}
35
36#wifi-loader svg circle.front {
37  stroke: var(--front-color);
38}
39
40#wifi-loader svg.circle-outer {
41  height: 86px;
42  width: 86px;
43}
44
45#wifi-loader svg.circle-outer circle {
46  stroke-dasharray: 62.75 188.25;
47}
48
49#wifi-loader svg.circle-outer circle.back {
50  animation: circle-outer135 1.8s ease infinite 0.3s;
51}
52
53#wifi-loader svg.circle-outer circle.front {
54  animation: circle-outer135 1.8s ease infinite 0.15s;
55}
56
57#wifi-loader svg.circle-middle {
58  height: 60px;
59  width: 60px;
60}
61
62#wifi-loader svg.circle-middle circle {
63  stroke-dasharray: 42.5 127.5;
64}
65
66#wifi-loader svg.circle-middle circle.back {
67  animation: circle-middle6123 1.8s ease infinite 0.25s;
68}
69
70#wifi-loader svg.circle-middle circle.front {
71  animation: circle-middle6123 1.8s ease infinite 0.1s;
72}
73
74#wifi-loader svg.circle-inner {
75  height: 34px;
76  width: 34px;
77}
78
79#wifi-loader svg.circle-inner circle {
80  stroke-dasharray: 22 66;
81}
82
83#wifi-loader svg.circle-inner circle.back {
84  animation: circle-inner162 1.8s ease infinite 0.2s;
85}
86
87#wifi-loader svg.circle-inner circle.front {
88  animation: circle-inner162 1.8s ease infinite 0.05s;
89}
90
91#wifi-loader .text {
92  position: absolute;
93  bottom: -40px;
94  display: flex;
95  justify-content: center;
96  align-items: center;
97  text-transform: lowercase;
98  font-weight: 500;
99  font-size: 14px;
100  letter-spacing: 0.2px;
101}
102
103#wifi-loader .text::before,
104#wifi-loader .text::after {
105  content: attr(data-text);
106}
107
108#wifi-loader .text::before {
109  color: var(--text-color);
110}
111
112#wifi-loader .text::after {
113  color: var(--front-color);
114  animation: text-animation76 3.6s ease infinite;
115  position: absolute;
116  left: 0;
117}
118
119@keyframes circle-outer135 {
120  0% {
121    stroke-dashoffset: 25;
122  }
123
124  25% {
125    stroke-dashoffset: 0;
126  }
127
128  65% {
129    stroke-dashoffset: 301;
130  }
131
132  80% {
133    stroke-dashoffset: 276;
134  }
135
136  100% {
137    stroke-dashoffset: 276;
138  }
139}
140
141@keyframes circle-middle6123 {
142  0% {
143    stroke-dashoffset: 17;
144  }
145
146  25% {
147    stroke-dashoffset: 0;
148  }
149
150  65% {
151    stroke-dashoffset: 204;
152  }
153
154  80% {
155    stroke-dashoffset: 187;
156  }
157
158  100% {
159    stroke-dashoffset: 187;
160  }
161}
162
163@keyframes circle-inner162 {
164  0% {
165    stroke-dashoffset: 9;
166  }
167
168  25% {
169    stroke-dashoffset: 0;
170  }
171
172  65% {
173    stroke-dashoffset: 106;
174  }
175
176  80% {
177    stroke-dashoffset: 97;
178  }
179
180  100% {
181    stroke-dashoffset: 97;
182  }
183}
184
185@keyframes text-animation76 {
186  0% {
187    clip-path: inset(0 100% 0 0);
188  }
189
190  50% {
191    clip-path: inset(0);
192  }
193
194  100% {
195    clip-path: inset(0 0 0 100%);
196  }
197}
198