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}