Loader by mobinkakei

1#wifi-loader {
2  --background: #62abff;
3  --front-color: #4f29f0;
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, #wifi-loader .text::after {
104  content: attr(data-text);
105}
106
107#wifi-loader .text::before {
108  color: var(--text-color);
109}
110
111#wifi-loader .text::after {
112  color: var(--front-color);
113  animation: text-animation76 3.6s ease infinite;
114  position: absolute;
115  left: 0;
116}
117
118@keyframes circle-outer135 {
119  0% {
120    stroke-dashoffset: 25;
121  }
122
123  25% {
124    stroke-dashoffset: 0;
125  }
126
127  65% {
128    stroke-dashoffset: 301;
129  }
130
131  80% {
132    stroke-dashoffset: 276;
133  }
134
135  100% {
136    stroke-dashoffset: 276;
137  }
138}
139
140@keyframes circle-middle6123 {
141  0% {
142    stroke-dashoffset: 17;
143  }
144
145  25% {
146    stroke-dashoffset: 0;
147  }
148
149  65% {
150    stroke-dashoffset: 204;
151  }
152
153  80% {
154    stroke-dashoffset: 187;
155  }
156
157  100% {
158    stroke-dashoffset: 187;
159  }
160}
161
162@keyframes circle-inner162 {
163  0% {
164    stroke-dashoffset: 9;
165  }
166
167  25% {
168    stroke-dashoffset: 0;
169  }
170
171  65% {
172    stroke-dashoffset: 106;
173  }
174
175  80% {
176    stroke-dashoffset: 97;
177  }
178
179  100% {
180    stroke-dashoffset: 97;
181  }
182}
183
184@keyframes text-animation76 {
185  0% {
186    clip-path: inset(0 100% 0 0);
187  }
188
189  50% {
190    clip-path: inset(0);
191  }
192
193  100% {
194    clip-path: inset(0 0 0 100%);
195  }
196}
197