Loader by SangeethSujith

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

.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: #1e90ff;
  border-radius: 7px;
}

.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

513 views

Variation of aloader

Copy to Figma

513 views

Variation of aloader

Comments

MIT License

Copyright - 2024 Nawsome  
Copyright - 2024 SangeethSujith (Sangeeth Sujith) 

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.