Loader by paesjr

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