Loader by csemszepp

#212121

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

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

.hex-brick {
  background: #ABF8FF;
  width: 30px;
  height: 17px;
  position: absolute;
  top: 5px;
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.h2 {
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
}

.h3 {
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
}

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

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  -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: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

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

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

.r1 > .hex-brick {
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .2s;
}

.r2 > .hex-brick {
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .4s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .4s;
}

.r3 > .hex-brick {
  animation-name: fade;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

@keyframes pulse {
  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 fade {
  0% {
    background: #ABF8FF;
  }

  50% {
    background: #90BBBF;
  }

  100% {
    background: #ABF8FF;
  }
}

@-webkit-keyframes pulse {
  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);
  }
}

@-webkit-keyframes fade {
  0% {
    background: #ABF8FF;
  }

  50% {
    background: #389CA6;
  }

  100% {
    background: #ABF8FF;
  }
}

Toggle prefixes

935 views

Variation of aloader

Copy to Figma

935 views

Variation of aloader

Comments

MIT License

Copyright - 2024 Nawsome 
Copyright - 2024 Nawsome  
Copyright - 2024 csemszepp  

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.