Loader by BridgerSilk

#212121

1.banter-loader {
2  position: absolute;
3  left: 50%;
4  top: 50%;
5  width: 72px;
6  height: 72px;
7  margin-left: -36px;
8  margin-top: -36px;
9}
10
11.banter-loader__box {
12  float: left;
13  position: relative;
14  width: 20px;
15  height: 20px;
16  margin-right: 6px;
17}
18
19.banter-loader__box:before {
20  content: "";
21  position: absolute;
22  left: 0;
23  top: 0;
24  width: 100%;
25  height: 100%;
26  background: rgb(81, 228, 220);
27  border-radius: 6px;
28  transform: rotate(45deg);
29  opacity: 70%;
30}
31
32.banter-loader__box:nth-child(3n) {
33  margin-right: 0;
34  margin-bottom: 6px;
35}
36
37.banter-loader__box:nth-child(1):before,
38.banter-loader__box:nth-child(4):before {
39  margin-left: 26px;
40}
41
42.banter-loader__box:nth-child(3):before {
43  margin-top: 52px;
44}
45
46.banter-loader__box:last-child {
47  margin-bottom: 0;
48}
49
50@keyframes moveBox-1 {
51  9.0909090909% {
52    transform: translate(-26px, 0);
53  }
54
55  18.1818181818% {
56    transform: translate(0px, 0);
57  }
58
59  27.2727272727% {
60    transform: translate(0px, 0);
61  }
62
63  36.3636363636% {
64    transform: translate(26px, 0);
65  }
66
67  45.4545454545% {
68    transform: translate(26px, 26px);
69  }
70
71  54.5454545455% {
72    transform: translate(26px, 26px);
73  }
74
75  63.6363636364% {
76    transform: translate(26px, 26px);
77  }
78
79  72.7272727273% {
80    transform: translate(26px, 0px);
81  }
82
83  81.8181818182% {
84    transform: translate(0px, 0px);
85  }
86
87  90.9090909091% {
88    transform: translate(-26px, 0px);
89  }
90
91  100% {
92    transform: translate(0px, 0px);
93  }
94}
95
96.banter-loader__box:nth-child(1) {
97  animation: moveBox-1 4s infinite;
98}
99
100@keyframes moveBox-2 {
101  9.0909090909% {
102    transform: translate(0, 0);
103  }
104
105  18.1818181818% {
106    transform: translate(26px, 0);
107  }
108
109  27.2727272727% {
110    transform: translate(0px, 0);
111  }
112
113  36.3636363636% {
114    transform: translate(26px, 0);
115  }
116
117  45.4545454545% {
118    transform: translate(26px, 26px);
119  }
120
121  54.5454545455% {
122    transform: translate(26px, 26px);
123  }
124
125  63.6363636364% {
126    transform: translate(26px, 26px);
127  }
128
129  72.7272727273% {
130    transform: translate(26px, 26px);
131  }
132
133  81.8181818182% {
134    transform: translate(0px, 26px);
135  }
136
137  90.9090909091% {
138    transform: translate(0px, 26px);
139  }
140
141  100% {
142    transform: translate(0px, 0px);
143  }
144}
145
146.banter-loader__box:nth-child(2) {
147  animation: moveBox-2 4s infinite;
148}
149
150@keyframes moveBox-3 {
151  9.0909090909% {
152    transform: translate(-26px, 0);
153  }
154
155  18.1818181818% {
156    transform: translate(-26px, 0);
157  }
158
159  27.2727272727% {
160    transform: translate(0px, 0);
161  }
162
163  36.3636363636% {
164    transform: translate(-26px, 0);
165  }
166
167  45.4545454545% {
168    transform: translate(-26px, 0);
169  }
170
171  54.5454545455% {
172    transform: translate(-26px, 0);
173  }
174
175  63.6363636364% {
176    transform: translate(-26px, 0);
177  }
178
179  72.7272727273% {
180    transform: translate(-26px, 0);
181  }
182
183  81.8181818182% {
184    transform: translate(-26px, -26px);
185  }
186
187  90.9090909091% {
188    transform: translate(0px, -26px);
189  }
190
191  100% {
192    transform: translate(0px, 0px);
193  }
194}
195
196.banter-loader__box:nth-child(3) {
197  animation: moveBox-3 4s infinite;
198}
199
200@keyframes moveBox-4 {
201  9.0909090909% {
202    transform: translate(-26px, 0);
203  }
204
205  18.1818181818% {
206    transform: translate(-26px, 0);
207  }
208
209  27.2727272727% {
210    transform: translate(-26px, -26px);
211  }
212
213  36.3636363636% {
214    transform: translate(0px, -26px);
215  }
216
217  45.4545454545% {
218    transform: translate(0px, 0px);
219  }
220
221  54.5454545455% {
222    transform: translate(0px, -26px);
223  }
224
225  63.6363636364% {
226    transform: translate(0px, -26px);
227  }
228
229  72.7272727273% {
230    transform: translate(0px, -26px);
231  }
232
233  81.8181818182% {
234    transform: translate(-26px, -26px);
235  }
236
237  90.9090909091% {
238    transform: translate(-26px, 0px);
239  }
240
241  100% {
242    transform: translate(0px, 0px);
243  }
244}
245
246.banter-loader__box:nth-child(4) {
247  animation: moveBox-4 4s infinite;
248}
249
250@keyframes moveBox-5 {
251  9.0909090909% {
252    transform: translate(0, 0);
253  }
254
255  18.1818181818% {
256    transform: translate(0, 0);
257  }
258
259  27.2727272727% {
260    transform: translate(0, 0);
261  }
262
263  36.3636363636% {
264    transform: translate(26px, 0);
265  }
266
267  45.4545454545% {
268    transform: translate(26px, 0);
269  }
270
271  54.5454545455% {
272    transform: translate(26px, 0);
273  }
274
275  63.6363636364% {
276    transform: translate(26px, 0);
277  }
278
279  72.7272727273% {
280    transform: translate(26px, 0);
281  }
282
283  81.8181818182% {
284    transform: translate(26px, -26px);
285  }
286
287  90.9090909091% {
288    transform: translate(0px, -26px);
289  }
290
291  100% {
292    transform: translate(0px, 0px);
293  }
294}
295
296.banter-loader__box:nth-child(5) {
297  animation: moveBox-5 4s infinite;
298}
299
300@keyframes moveBox-6 {
301  9.0909090909% {
302    transform: translate(0, 0);
303  }
304
305  18.1818181818% {
306    transform: translate(-26px, 0);
307  }
308
309  27.2727272727% {
310    transform: translate(-26px, 0);
311  }
312
313  36.3636363636% {
314    transform: translate(0px, 0);
315  }
316
317  45.4545454545% {
318    transform: translate(0px, 0);
319  }
320
321  54.5454545455% {
322    transform: translate(0px, 0);
323  }
324
325  63.6363636364% {
326    transform: translate(0px, 0);
327  }
328
329  72.7272727273% {
330    transform: translate(0px, 26px);
331  }
332
333  81.8181818182% {
334    transform: translate(-26px, 26px);
335  }
336
337  90.9090909091% {
338    transform: translate(-26px, 0px);
339  }
340
341  100% {
342    transform: translate(0px, 0px);
343  }
344}
345
346.banter-loader__box:nth-child(6) {
347  animation: moveBox-6 4s infinite;
348}
349
350@keyframes moveBox-7 {
351  9.0909090909% {
352    transform: translate(26px, 0);
353  }
354
355  18.1818181818% {
356    transform: translate(26px, 0);
357  }
358
359  27.2727272727% {
360    transform: translate(26px, 0);
361  }
362
363  36.3636363636% {
364    transform: translate(0px, 0);
365  }
366
367  45.4545454545% {
368    transform: translate(0px, -26px);
369  }
370
371  54.5454545455% {
372    transform: translate(26px, -26px);
373  }
374
375  63.6363636364% {
376    transform: translate(0px, -26px);
377  }
378
379  72.7272727273% {
380    transform: translate(0px, -26px);
381  }
382
383  81.8181818182% {
384    transform: translate(0px, 0px);
385  }
386
387  90.9090909091% {
388    transform: translate(26px, 0px);
389  }
390
391  100% {
392    transform: translate(0px, 0px);
393  }
394}
395
396.banter-loader__box:nth-child(7) {
397  animation: moveBox-7 4s infinite;
398}
399
400@keyframes moveBox-8 {
401  9.0909090909% {
402    transform: translate(0, 0);
403  }
404
405  18.1818181818% {
406    transform: translate(-26px, 0);
407  }
408
409  27.2727272727% {
410    transform: translate(-26px, -26px);
411  }
412
413  36.3636363636% {
414    transform: translate(0px, -26px);
415  }
416
417  45.4545454545% {
418    transform: translate(0px, -26px);
419  }
420
421  54.5454545455% {
422    transform: translate(0px, -26px);
423  }
424
425  63.6363636364% {
426    transform: translate(0px, -26px);
427  }
428
429  72.7272727273% {
430    transform: translate(0px, -26px);
431  }
432
433  81.8181818182% {
434    transform: translate(26px, -26px);
435  }
436
437  90.9090909091% {
438    transform: translate(26px, 0px);
439  }
440
441  100% {
442    transform: translate(0px, 0px);
443  }
444}
445
446.banter-loader__box:nth-child(8) {
447  animation: moveBox-8 4s infinite;
448}
449
450@keyframes moveBox-9 {
451  9.0909090909% {
452    transform: translate(-26px, 0);
453  }
454
455  18.1818181818% {
456    transform: translate(-26px, 0);
457  }
458
459  27.2727272727% {
460    transform: translate(0px, 0);
461  }
462
463  36.3636363636% {
464    transform: translate(-26px, 0);
465  }
466
467  45.4545454545% {
468    transform: translate(0px, 0);
469  }
470
471  54.5454545455% {
472    transform: translate(0px, 0);
473  }
474
475  63.6363636364% {
476    transform: translate(-26px, 0);
477  }
478
479  72.7272727273% {
480    transform: translate(-26px, 0);
481  }
482
483  81.8181818182% {
484    transform: translate(-52px, 0);
485  }
486
487  90.9090909091% {
488    transform: translate(-26px, 0);
489  }
490
491  100% {
492    transform: translate(0px, 0);
493  }
494}
495
496.banter-loader__box:nth-child(9) {
497  animation: moveBox-9 4s infinite;
498}
499

.banter-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
}

.banter-loader__box {
  float: left;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.banter-loader__box:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(81, 228, 220);
  border-radius: 6px;
  transform: rotate(45deg);
  opacity: 70%;
}

.banter-loader__box:nth-child(3n) {
  margin-right: 0;
  margin-bottom: 6px;
}

.banter-loader__box:nth-child(1):before,
.banter-loader__box:nth-child(4):before {
  margin-left: 26px;
}

.banter-loader__box:nth-child(3):before {
  margin-top: 52px;
}

.banter-loader__box:last-child {
  margin-bottom: 0;
}

@keyframes moveBox-1 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(0px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 0px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(1) {
  animation: moveBox-1 4s infinite;
}

@keyframes moveBox-2 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 26px);
  }

  54.5454545455% {
    transform: translate(26px, 26px);
  }

  63.6363636364% {
    transform: translate(26px, 26px);
  }

  72.7272727273% {
    transform: translate(26px, 26px);
  }

  81.8181818182% {
    transform: translate(0px, 26px);
  }

  90.9090909091% {
    transform: translate(0px, 26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(2) {
  animation: moveBox-2 4s infinite;
}

@keyframes moveBox-3 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(-26px, 0);
  }

  54.5454545455% {
    transform: translate(-26px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(3) {
  animation: moveBox-3 4s infinite;
}

@keyframes moveBox-4 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, 0px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(-26px, -26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(4) {
  animation: moveBox-4 4s infinite;
}

@keyframes moveBox-5 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(0, 0);
  }

  27.2727272727% {
    transform: translate(0, 0);
  }

  36.3636363636% {
    transform: translate(26px, 0);
  }

  45.4545454545% {
    transform: translate(26px, 0);
  }

  54.5454545455% {
    transform: translate(26px, 0);
  }

  63.6363636364% {
    transform: translate(26px, 0);
  }

  72.7272727273% {
    transform: translate(26px, 0);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(0px, -26px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(5) {
  animation: moveBox-5 4s infinite;
}

@keyframes moveBox-6 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(0px, 0);
  }

  72.7272727273% {
    transform: translate(0px, 26px);
  }

  81.8181818182% {
    transform: translate(-26px, 26px);
  }

  90.9090909091% {
    transform: translate(-26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(6) {
  animation: moveBox-6 4s infinite;
}

@keyframes moveBox-7 {
  9.0909090909% {
    transform: translate(26px, 0);
  }

  18.1818181818% {
    transform: translate(26px, 0);
  }

  27.2727272727% {
    transform: translate(26px, 0);
  }

  36.3636363636% {
    transform: translate(0px, 0);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(26px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(0px, 0px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(7) {
  animation: moveBox-7 4s infinite;
}

@keyframes moveBox-8 {
  9.0909090909% {
    transform: translate(0, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(-26px, -26px);
  }

  36.3636363636% {
    transform: translate(0px, -26px);
  }

  45.4545454545% {
    transform: translate(0px, -26px);
  }

  54.5454545455% {
    transform: translate(0px, -26px);
  }

  63.6363636364% {
    transform: translate(0px, -26px);
  }

  72.7272727273% {
    transform: translate(0px, -26px);
  }

  81.8181818182% {
    transform: translate(26px, -26px);
  }

  90.9090909091% {
    transform: translate(26px, 0px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

.banter-loader__box:nth-child(8) {
  animation: moveBox-8 4s infinite;
}

@keyframes moveBox-9 {
  9.0909090909% {
    transform: translate(-26px, 0);
  }

  18.1818181818% {
    transform: translate(-26px, 0);
  }

  27.2727272727% {
    transform: translate(0px, 0);
  }

  36.3636363636% {
    transform: translate(-26px, 0);
  }

  45.4545454545% {
    transform: translate(0px, 0);
  }

  54.5454545455% {
    transform: translate(0px, 0);
  }

  63.6363636364% {
    transform: translate(-26px, 0);
  }

  72.7272727273% {
    transform: translate(-26px, 0);
  }

  81.8181818182% {
    transform: translate(-52px, 0);
  }

  90.9090909091% {
    transform: translate(-26px, 0);
  }

  100% {
    transform: translate(0px, 0);
  }
}

.banter-loader__box:nth-child(9) {
  animation: moveBox-9 4s infinite;
}

Toggle prefixes

329 views

Variation of aloader

Copy to Figma

329 views

Variation of aloader

Comments

MIT License

Copyright - 2024 Nawsome  
Copyright - 2024 BridgerSilk (Silky) 

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.