Loader by 00Kubi

#e8e8e8

1css <style > .socket {
2  width: 200px;
3  height: 200px;
4  position: absolute;
5  left: 50%;
6  margin-left: -100px;
7  top: 50%;
8  margin-top: -100px;
9}
10
11.circle {
12  background: #000000;
13  width: 30px;
14  height: 30px;
15  border-radius: 50%;
16  position: absolute;
17  top: 0;
18  left: 0;
19  animation-name: fade00;
20  animation-duration: 2s;
21  animation-iteration-count: infinite;
22  -webkit-animation-name: fade00;
23  -webkit-animation-duration: 2s;
24  -webkit-animation-iteration-count: infinite;
25}
26
27.gel {
28  height: 30px;
29  width: 30px;
30  transition: all 0.3s;
31  -webkit-transition: all 0.3s;
32  position: absolute;
33  top: 50%;
34  left: 50%;
35}
36
37.center-gel {
38  margin-left: -15px;
39  margin-top: -15px;
40  animation-name: pulse00;
41  animation-duration: 2s;
42  animation-iteration-count: infinite;
43  -webkit-animation-name: pulse00;
44  -webkit-animation-duration: 2s;
45  -webkit-animation-iteration-count: infinite;
46}
47
48.c1 {
49  margin-left: -47px;
50  margin-top: -15px;
51}
52
53.c2 {
54  margin-left: -31px;
55  margin-top: -43px;
56}
57
58.c3 {
59  margin-left: 1px;
60  margin-top: -43px;
61}
62
63.c4 {
64  margin-left: 17px;
65  margin-top: -15px;
66}
67
68.c5 {
69  margin-left: -31px;
70  margin-top: 13px;
71}
72
73.c6 {
74  margin-left: 1px;
75  margin-top: 13px;
76}
77
78.c7 {
79  margin-left: -63px;
80  margin-top: -43px;
81}
82
83.c8 {
84  margin-left: 33px;
85  margin-top: -43px;
86}
87
88.c9 {
89  margin-left: -15px;
90  margin-top: 41px;
91}
92
93.c10 {
94  margin-left: -63px;
95  margin-top: 13px;
96}
97
98.c11 {
99  margin-left: 33px;
100  margin-top: 13px;
101}
102
103.c12 {
104  margin-left: -15px;
105  margin-top: -71px;
106}
107
108.c13 {
109  margin-left: -47px;
110  margin-top: -71px;
111}
112
113.c14 {
114  margin-left: 17px;
115  margin-top: -71px;
116}
117
118.c15 {
119  margin-left: -47px;
120  margin-top: 41px;
121}
122
123.c16 {
124  margin-left: 17px;
125  margin-top: 41px;
126}
127
128.c17 {
129  margin-left: -79px;
130  margin-top: -15px;
131}
132
133.c18 {
134  margin-left: 49px;
135  margin-top: -15px;
136}
137
138.c19 {
139  margin-left: -63px;
140  margin-top: -99px;
141}
142
143.c20 {
144  margin-left: 33px;
145  margin-top: -99px;
146}
147
148.c21 {
149  margin-left: 1px;
150  margin-top: -99px;
151}
152
153.c22 {
154  margin-left: -31px;
155  margin-top: -99px;
156}
157
158.c23 {
159  margin-left: -63px;
160  margin-top: 69px;
161}
162
163.c24 {
164  margin-left: 33px;
165  margin-top: 69px;
166}
167
168.c25 {
169  margin-left: 1px;
170  margin-top: 69px;
171}
172
173.c26 {
174  margin-left: -31px;
175  margin-top: 69px;
176}
177
178.c27 {
179  margin-left: -79px;
180  margin-top: -15px;
181}
182
183.c28 {
184  margin-left: -95px;
185  margin-top: -43px;
186}
187
188.c29 {
189  margin-left: -95px;
190  margin-top: 13px;
191}
192
193.c30 {
194  margin-left: 49px;
195  margin-top: 41px;
196}
197
198.c31 {
199  margin-left: -79px;
200  margin-top: -71px;
201}
202
203.c32 {
204  margin-left: -111px;
205  margin-top: -15px;
206}
207
208.c33 {
209  margin-left: 65px;
210  margin-top: -43px;
211}
212
213.c34 {
214  margin-left: 65px;
215  margin-top: 13px;
216}
217
218.c35 {
219  margin-left: -79px;
220  margin-top: 41px;
221}
222
223.c36 {
224  margin-left: 49px;
225  margin-top: -71px;
226}
227
228.c37 {
229  margin-left: 81px;
230  margin-top: -15px;
231}
232
233.r1 {
234  animation-name: pulse00;
235  animation-duration: 2s;
236  animation-iteration-count: infinite;
237  animation-delay: 0.2s;
238  -webkit-animation-name: pulse00;
239  -webkit-animation-duration: 2s;
240  -webkit-animation-iteration-count: infinite;
241  -webkit-animation-delay: 0.2s;
242}
243
244.r2 {
245  animation-name: pulse00;
246  animation-duration: 2s;
247  animation-iteration-count: infinite;
248  animation-delay: 0.4s;
249  -webkit-animation-name: pulse00;
250  -webkit-animation-duration: 2s;
251  -webkit-animation-iteration-count: infinite;
252  -webkit-animation-delay: 0.4s;
253}
254
255.r3 {
256  animation-name: pulse00;
257  animation-duration: 2s;
258  animation-iteration-count: infinite;
259  animation-delay: 0.6s;
260  -webkit-animation-name: pulse00;
261  -webkit-animation-duration: 2s;
262  -webkit-animation-iteration-count: infinite;
263  -webkit-animation-delay: 0.6s;
264}
265
266.r1 > .circle {
267  animation-name: fade00;
268  animation-duration: 2s;
269  animation-iteration-count: infinite;
270  animation-delay: 0.2s;
271  -webkit-animation-name: fade00;
272  -webkit-animation-duration: 2s;
273  -webkit-animation-iteration-count: infinite;
274  -webkit-animation-delay: 0.2s;
275}
276
277.r2 > .circle {
278  animation-name: fade00;
279  animation-duration: 2s;
280  animation-iteration-count: infinite;
281  animation-delay: 0.4s;
282  -webkit-animation-name: fade00;
283  -webkit-animation-duration: 2s;
284  -webkit-animation-iteration-count: infinite;
285  -webkit-animation-delay: 0.4s;
286}
287
288.r3 > .circle {
289  animation-name: fade00;
290  animation-duration: 2s;
291  animation-iteration-count: infinite;
292  animation-delay: 0.6s;
293  -webkit-animation-name: fade00;
294  -webkit-animation-duration: 2s;
295  -webkit-animation-iteration-count: infinite;
296  -webkit-animation-delay: 0.6s;
297}
298
299@keyframes pulse00 {
300  0% {
301    -webkit-transform: scale(1);
302    transform: scale(1);
303  }
304
305  50% {
306    -webkit-transform: scale(0.01);
307    transform: scale(0.01);
308  }
309
310  100% {
311    -webkit-transform: scale(1);
312    transform: scale(1);
313  }
314}
315
316@keyframes fade00 {
317  0% {
318    background: #252525;
319  }
320
321  50% {
322    background: #000000;
323  }
324
325  100% {
326    background: #353535;
327  }
328}
329

css <style > .socket {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
}

.circle {
  background: #000000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.gel {
  height: 30px;
  width: 30px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
}

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.c1 {
  margin-left: -47px;
  margin-top: -15px;
}

.c2 {
  margin-left: -31px;
  margin-top: -43px;
}

.c3 {
  margin-left: 1px;
  margin-top: -43px;
}

.c4 {
  margin-left: 17px;
  margin-top: -15px;
}

.c5 {
  margin-left: -31px;
  margin-top: 13px;
}

.c6 {
  margin-left: 1px;
  margin-top: 13px;
}

.c7 {
  margin-left: -63px;
  margin-top: -43px;
}

.c8 {
  margin-left: 33px;
  margin-top: -43px;
}

.c9 {
  margin-left: -15px;
  margin-top: 41px;
}

.c10 {
  margin-left: -63px;
  margin-top: 13px;
}

.c11 {
  margin-left: 33px;
  margin-top: 13px;
}

.c12 {
  margin-left: -15px;
  margin-top: -71px;
}

.c13 {
  margin-left: -47px;
  margin-top: -71px;
}

.c14 {
  margin-left: 17px;
  margin-top: -71px;
}

.c15 {
  margin-left: -47px;
  margin-top: 41px;
}

.c16 {
  margin-left: 17px;
  margin-top: 41px;
}

.c17 {
  margin-left: -79px;
  margin-top: -15px;
}

.c18 {
  margin-left: 49px;
  margin-top: -15px;
}

.c19 {
  margin-left: -63px;
  margin-top: -99px;
}

.c20 {
  margin-left: 33px;
  margin-top: -99px;
}

.c21 {
  margin-left: 1px;
  margin-top: -99px;
}

.c22 {
  margin-left: -31px;
  margin-top: -99px;
}

.c23 {
  margin-left: -63px;
  margin-top: 69px;
}

.c24 {
  margin-left: 33px;
  margin-top: 69px;
}

.c25 {
  margin-left: 1px;
  margin-top: 69px;
}

.c26 {
  margin-left: -31px;
  margin-top: 69px;
}

.c27 {
  margin-left: -79px;
  margin-top: -15px;
}

.c28 {
  margin-left: -95px;
  margin-top: -43px;
}

.c29 {
  margin-left: -95px;
  margin-top: 13px;
}

.c30 {
  margin-left: 49px;
  margin-top: 41px;
}

.c31 {
  margin-left: -79px;
  margin-top: -71px;
}

.c32 {
  margin-left: -111px;
  margin-top: -15px;
}

.c33 {
  margin-left: 65px;
  margin-top: -43px;
}

.c34 {
  margin-left: 65px;
  margin-top: 13px;
}

.c35 {
  margin-left: -79px;
  margin-top: 41px;
}

.c36 {
  margin-left: 49px;
  margin-top: -71px;
}

.c37 {
  margin-left: 81px;
  margin-top: -15px;
}

.r1 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.2s;
}

.r2 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.4s;
}

.r3 {
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.6s;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.6s;
}

.r1 > .circle {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.2s;
}

.r2 > .circle {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.4s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.4s;
}

.r3 > .circle {
  animation-name: fade00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0.6s;
  -webkit-animation-name: fade00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.6s;
}

@keyframes pulse00 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade00 {
  0% {
    background: #252525;
  }

  50% {
    background: #000000;
  }

  100% {
    background: #353535;
  }
}

Toggle prefixes

348 views

Variation of aloader

Copy to Figma

348 views

Variation of aloader

Comments

MIT License

Copyright - 2024 Nawsome  
Copyright - 2024 00Kubi (Kubi) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.