Loader by Nawsome made with CSS

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

.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: #fff;
}

.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

7.9K views

Comments

Variations

Get code

Link to post

MIT License

Copyright - 2023 Nawsome  

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.