Loader by Admin12121

#e8e8e8

1.loader {
2  --duration: 3s;
3  --primary: rgba(39, 94, 254, 1);
4  --primary-light: #2f71ff;
5  --primary-rgba: rgba(39, 94, 254, 0);
6  width: 200px;
7  height: 320px;
8  position: relative;
9  transform-style: preserve-3d;
10}
11
12@media (max-width: 480px) {
13  .loader {
14    zoom: 0.44;
15  }
16}
17
18.loader:before, .loader:after {
19  --r: 20.5deg;
20  content: "";
21  width: 320px;
22  height: 140px;
23  position: absolute;
24  right: 32%;
25  bottom: -11px;
26/* change the back groung color on switching from light to dark mood */
27  background: #e8e8e8;
28  transform: translateZ(200px) rotate(var(--r));
29  -webkit-animation: mask var(--duration) linear forwards infinite;
30  animation: mask var(--duration) linear forwards infinite;
31}
32
33.loader:after {
34  --r: -20.5deg;
35  right: auto;
36  left: 32%;
37}
38
39.loader .ground {
40  position: absolute;
41  left: -50px;
42  bottom: -120px;
43  transform-style: preserve-3d;
44  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
45}
46
47.loader .ground div {
48  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
49  width: 200px;
50  height: 200px;
51  background: var(--primary);
52  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
53  transform-style: preserve-3d;
54  -webkit-animation: ground var(--duration) linear forwards infinite;
55  animation: ground var(--duration) linear forwards infinite;
56}
57
58.loader .ground div:before, .loader .ground div:after {
59  --rx: 90deg;
60  --ry: 0deg;
61  --x: 44px;
62  --y: 162px;
63  --z: -50px;
64  content: "";
65  width: 156px;
66  height: 300px;
67  opacity: 0;
68  background: linear-gradient(var(--primary), var(--primary-rgba));
69  position: absolute;
70  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
71  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
72  animation: ground-shine var(--duration) linear forwards infinite;
73}
74
75.loader .ground div:after {
76  --rx: 90deg;
77  --ry: 90deg;
78  --x: 0;
79  --y: 177px;
80  --z: 150px;
81}
82
83.loader .box {
84  --x: 0;
85  --y: 0;
86  position: absolute;
87  -webkit-animation: var(--duration) linear forwards infinite;
88  animation: var(--duration) linear forwards infinite;
89  transform: translate(var(--x), var(--y));
90}
91
92.loader .box div {
93  background-color: var(--primary);
94  width: 48px;
95  height: 48px;
96  position: relative;
97  transform-style: preserve-3d;
98  -webkit-animation: var(--duration) ease forwards infinite;
99  animation: var(--duration) ease forwards infinite;
100  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
101}
102
103.loader .box div:before, .loader .box div:after {
104  --rx: 90deg;
105  --ry: 0deg;
106  --z: 24px;
107  --y: -24px;
108  --x: 0;
109  content: "";
110  position: absolute;
111  background-color: inherit;
112  width: inherit;
113  height: inherit;
114  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
115  filter: brightness(var(--b, 1.2));
116}
117
118.loader .box div:after {
119  --rx: 0deg;
120  --ry: 90deg;
121  --x: 24px;
122  --y: 0;
123  --b: 1.4;
124}
125
126.loader .box.box0 {
127  --x: -220px;
128  --y: -120px;
129  left: 58px;
130  top: 108px;
131}
132
133.loader .box.box1 {
134  --x: -260px;
135  --y: 120px;
136  left: 25px;
137  top: 120px;
138}
139
140.loader .box.box2 {
141  --x: 120px;
142  --y: -190px;
143  left: 58px;
144  top: 64px;
145}
146
147.loader .box.box3 {
148  --x: 280px;
149  --y: -40px;
150  left: 91px;
151  top: 120px;
152}
153
154.loader .box.box4 {
155  --x: 60px;
156  --y: 200px;
157  left: 58px;
158  top: 132px;
159}
160
161.loader .box.box5 {
162  --x: -220px;
163  --y: -120px;
164  left: 25px;
165  top: 76px;
166}
167
168.loader .box.box6 {
169  --x: -260px;
170  --y: 120px;
171  left: 91px;
172  top: 76px;
173}
174
175.loader .box.box7 {
176  --x: -240px;
177  --y: 200px;
178  left: 58px;
179  top: 87px;
180}
181
182.loader .box0 {
183  -webkit-animation-name: box-move0;
184  animation-name: box-move0;
185}
186
187.loader .box0 div {
188  -webkit-animation-name: box-scale0;
189  animation-name: box-scale0;
190}
191
192.loader .box1 {
193  -webkit-animation-name: box-move1;
194  animation-name: box-move1;
195}
196
197.loader .box1 div {
198  -webkit-animation-name: box-scale1;
199  animation-name: box-scale1;
200}
201
202.loader .box2 {
203  -webkit-animation-name: box-move2;
204  animation-name: box-move2;
205}
206
207.loader .box2 div {
208  -webkit-animation-name: box-scale2;
209  animation-name: box-scale2;
210}
211
212.loader .box3 {
213  -webkit-animation-name: box-move3;
214  animation-name: box-move3;
215}
216
217.loader .box3 div {
218  -webkit-animation-name: box-scale3;
219  animation-name: box-scale3;
220}
221
222.loader .box4 {
223  -webkit-animation-name: box-move4;
224  animation-name: box-move4;
225}
226
227.loader .box4 div {
228  -webkit-animation-name: box-scale4;
229  animation-name: box-scale4;
230}
231
232.loader .box5 {
233  -webkit-animation-name: box-move5;
234  animation-name: box-move5;
235}
236
237.loader .box5 div {
238  -webkit-animation-name: box-scale5;
239  animation-name: box-scale5;
240}
241
242.loader .box6 {
243  -webkit-animation-name: box-move6;
244  animation-name: box-move6;
245}
246
247.loader .box6 div {
248  -webkit-animation-name: box-scale6;
249  animation-name: box-scale6;
250}
251
252.loader .box7 {
253  -webkit-animation-name: box-move7;
254  animation-name: box-move7;
255}
256
257.loader .box7 div {
258  -webkit-animation-name: box-scale7;
259  animation-name: box-scale7;
260}
261
262@-webkit-keyframes box-move0 {
263  12% {
264    transform: translate(var(--x), var(--y));
265  }
266
267  25%, 52% {
268    transform: translate(0, 0);
269  }
270
271  80% {
272    transform: translate(0, -32px);
273  }
274
275  90%, 100% {
276    transform: translate(0, 188px);
277  }
278}
279
280@keyframes box-move0 {
281  12% {
282    transform: translate(var(--x), var(--y));
283  }
284
285  25%, 52% {
286    transform: translate(0, 0);
287  }
288
289  80% {
290    transform: translate(0, -32px);
291  }
292
293  90%, 100% {
294    transform: translate(0, 188px);
295  }
296}
297
298@-webkit-keyframes box-scale0 {
299  6% {
300    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
301  }
302
303  14%, 100% {
304    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
305  }
306}
307
308@keyframes box-scale0 {
309  6% {
310    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
311  }
312
313  14%, 100% {
314    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
315  }
316}
317
318@-webkit-keyframes box-move1 {
319  16% {
320    transform: translate(var(--x), var(--y));
321  }
322
323  29%, 52% {
324    transform: translate(0, 0);
325  }
326
327  80% {
328    transform: translate(0, -32px);
329  }
330
331  90%, 100% {
332    transform: translate(0, 188px);
333  }
334}
335
336@keyframes box-move1 {
337  16% {
338    transform: translate(var(--x), var(--y));
339  }
340
341  29%, 52% {
342    transform: translate(0, 0);
343  }
344
345  80% {
346    transform: translate(0, -32px);
347  }
348
349  90%, 100% {
350    transform: translate(0, 188px);
351  }
352}
353
354@-webkit-keyframes box-scale1 {
355  10% {
356    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
357  }
358
359  18%, 100% {
360    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
361  }
362}
363
364@keyframes box-scale1 {
365  10% {
366    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
367  }
368
369  18%, 100% {
370    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
371  }
372}
373
374@-webkit-keyframes box-move2 {
375  20% {
376    transform: translate(var(--x), var(--y));
377  }
378
379  33%, 52% {
380    transform: translate(0, 0);
381  }
382
383  80% {
384    transform: translate(0, -32px);
385  }
386
387  90%, 100% {
388    transform: translate(0, 188px);
389  }
390}
391
392@keyframes box-move2 {
393  20% {
394    transform: translate(var(--x), var(--y));
395  }
396
397  33%, 52% {
398    transform: translate(0, 0);
399  }
400
401  80% {
402    transform: translate(0, -32px);
403  }
404
405  90%, 100% {
406    transform: translate(0, 188px);
407  }
408}
409
410@-webkit-keyframes box-scale2 {
411  14% {
412    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
413  }
414
415  22%, 100% {
416    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
417  }
418}
419
420@keyframes box-scale2 {
421  14% {
422    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
423  }
424
425  22%, 100% {
426    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
427  }
428}
429
430@-webkit-keyframes box-move3 {
431  24% {
432    transform: translate(var(--x), var(--y));
433  }
434
435  37%, 52% {
436    transform: translate(0, 0);
437  }
438
439  80% {
440    transform: translate(0, -32px);
441  }
442
443  90%, 100% {
444    transform: translate(0, 188px);
445  }
446}
447
448@keyframes box-move3 {
449  24% {
450    transform: translate(var(--x), var(--y));
451  }
452
453  37%, 52% {
454    transform: translate(0, 0);
455  }
456
457  80% {
458    transform: translate(0, -32px);
459  }
460
461  90%, 100% {
462    transform: translate(0, 188px);
463  }
464}
465
466@-webkit-keyframes box-scale3 {
467  18% {
468    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
469  }
470
471  26%, 100% {
472    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
473  }
474}
475
476@keyframes box-scale3 {
477  18% {
478    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
479  }
480
481  26%, 100% {
482    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
483  }
484}
485
486@-webkit-keyframes box-move4 {
487  28% {
488    transform: translate(var(--x), var(--y));
489  }
490
491  41%, 52% {
492    transform: translate(0, 0);
493  }
494
495  80% {
496    transform: translate(0, -32px);
497  }
498
499  90%, 100% {
500    transform: translate(0, 188px);
501  }
502}
503
504@keyframes box-move4 {
505  28% {
506    transform: translate(var(--x), var(--y));
507  }
508
509  41%, 52% {
510    transform: translate(0, 0);
511  }
512
513  80% {
514    transform: translate(0, -32px);
515  }
516
517  90%, 100% {
518    transform: translate(0, 188px);
519  }
520}
521
522@-webkit-keyframes box-scale4 {
523  22% {
524    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
525  }
526
527  30%, 100% {
528    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
529  }
530}
531
532@keyframes box-scale4 {
533  22% {
534    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
535  }
536
537  30%, 100% {
538    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
539  }
540}
541
542@-webkit-keyframes box-move5 {
543  32% {
544    transform: translate(var(--x), var(--y));
545  }
546
547  45%, 52% {
548    transform: translate(0, 0);
549  }
550
551  80% {
552    transform: translate(0, -32px);
553  }
554
555  90%, 100% {
556    transform: translate(0, 188px);
557  }
558}
559
560@keyframes box-move5 {
561  32% {
562    transform: translate(var(--x), var(--y));
563  }
564
565  45%, 52% {
566    transform: translate(0, 0);
567  }
568
569  80% {
570    transform: translate(0, -32px);
571  }
572
573  90%, 100% {
574    transform: translate(0, 188px);
575  }
576}
577
578@-webkit-keyframes box-scale5 {
579  26% {
580    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
581  }
582
583  34%, 100% {
584    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
585  }
586}
587
588@keyframes box-scale5 {
589  26% {
590    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
591  }
592
593  34%, 100% {
594    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
595  }
596}
597
598@-webkit-keyframes box-move6 {
599  36% {
600    transform: translate(var(--x), var(--y));
601  }
602
603  49%, 52% {
604    transform: translate(0, 0);
605  }
606
607  80% {
608    transform: translate(0, -32px);
609  }
610
611  90%, 100% {
612    transform: translate(0, 188px);
613  }
614}
615
616@keyframes box-move6 {
617  36% {
618    transform: translate(var(--x), var(--y));
619  }
620
621  49%, 52% {
622    transform: translate(0, 0);
623  }
624
625  80% {
626    transform: translate(0, -32px);
627  }
628
629  90%, 100% {
630    transform: translate(0, 188px);
631  }
632}
633
634@-webkit-keyframes box-scale6 {
635  30% {
636    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
637  }
638
639  38%, 100% {
640    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
641  }
642}
643
644@keyframes box-scale6 {
645  30% {
646    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
647  }
648
649  38%, 100% {
650    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
651  }
652}
653
654@-webkit-keyframes box-move7 {
655  40% {
656    transform: translate(var(--x), var(--y));
657  }
658
659  53%, 52% {
660    transform: translate(0, 0);
661  }
662
663  80% {
664    transform: translate(0, -32px);
665  }
666
667  90%, 100% {
668    transform: translate(0, 188px);
669  }
670}
671
672@keyframes box-move7 {
673  40% {
674    transform: translate(var(--x), var(--y));
675  }
676
677  53%, 52% {
678    transform: translate(0, 0);
679  }
680
681  80% {
682    transform: translate(0, -32px);
683  }
684
685  90%, 100% {
686    transform: translate(0, 188px);
687  }
688}
689
690@-webkit-keyframes box-scale7 {
691  34% {
692    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
693  }
694
695  42%, 100% {
696    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
697  }
698}
699
700@keyframes box-scale7 {
701  34% {
702    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
703  }
704
705  42%, 100% {
706    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
707  }
708}
709
710@-webkit-keyframes ground {
711  0%, 65% {
712    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
713  }
714
715  75%, 90% {
716    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
717  }
718
719  100% {
720    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
721  }
722}
723
724@keyframes ground {
725  0%, 65% {
726    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
727  }
728
729  75%, 90% {
730    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
731  }
732
733  100% {
734    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
735  }
736}
737
738@-webkit-keyframes ground-shine {
739  0%, 70% {
740    opacity: 0;
741  }
742
743  75%, 87% {
744    opacity: 0.2;
745  }
746
747  100% {
748    opacity: 0;
749  }
750}
751
752@keyframes ground-shine {
753  0%, 70% {
754    opacity: 0;
755  }
756
757  75%, 87% {
758    opacity: 0.2;
759  }
760
761  100% {
762    opacity: 0;
763  }
764}
765
766@-webkit-keyframes mask {
767  0%, 65% {
768    opacity: 0;
769  }
770
771  66%, 100% {
772    opacity: 1;
773  }
774}
775
776@keyframes mask {
777  0%, 65% {
778    opacity: 0;
779  }
780
781  66%, 100% {
782    opacity: 1;
783  }
784}
785

.loader {
  --duration: 3s;
  --primary: rgba(39, 94, 254, 1);
  --primary-light: #2f71ff;
  --primary-rgba: rgba(39, 94, 254, 0);
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
}

@media (max-width: 480px) {
  .loader {
    zoom: 0.44;
  }
}

.loader:before, .loader:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
/* change the back groung color on switching from light to dark mood */
  background: #e8e8e8;
  transform: translateZ(200px) rotate(var(--r));
  -webkit-animation: mask var(--duration) linear forwards infinite;
  animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}

.loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

.loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: var(--primary);
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
  -webkit-animation: ground var(--duration) linear forwards infinite;
  animation: ground var(--duration) linear forwards infinite;
}

.loader .ground div:before, .loader .ground div:after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
  animation: ground-shine var(--duration) linear forwards infinite;
}

.loader .ground div:after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}

.loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  -webkit-animation: var(--duration) linear forwards infinite;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}

.loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: var(--duration) ease forwards infinite;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}

.loader .box div:before, .loader .box div:after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}

.loader .box div:after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}

.loader .box.box0 {
  --x: -220px;
  --y: -120px;
  left: 58px;
  top: 108px;
}

.loader .box.box1 {
  --x: -260px;
  --y: 120px;
  left: 25px;
  top: 120px;
}

.loader .box.box2 {
  --x: 120px;
  --y: -190px;
  left: 58px;
  top: 64px;
}

.loader .box.box3 {
  --x: 280px;
  --y: -40px;
  left: 91px;
  top: 120px;
}

.loader .box.box4 {
  --x: 60px;
  --y: 200px;
  left: 58px;
  top: 132px;
}

.loader .box.box5 {
  --x: -220px;
  --y: -120px;
  left: 25px;
  top: 76px;
}

.loader .box.box6 {
  --x: -260px;
  --y: 120px;
  left: 91px;
  top: 76px;
}

.loader .box.box7 {
  --x: -240px;
  --y: 200px;
  left: 58px;
  top: 87px;
}

.loader .box0 {
  -webkit-animation-name: box-move0;
  animation-name: box-move0;
}

.loader .box0 div {
  -webkit-animation-name: box-scale0;
  animation-name: box-scale0;
}

.loader .box1 {
  -webkit-animation-name: box-move1;
  animation-name: box-move1;
}

.loader .box1 div {
  -webkit-animation-name: box-scale1;
  animation-name: box-scale1;
}

.loader .box2 {
  -webkit-animation-name: box-move2;
  animation-name: box-move2;
}

.loader .box2 div {
  -webkit-animation-name: box-scale2;
  animation-name: box-scale2;
}

.loader .box3 {
  -webkit-animation-name: box-move3;
  animation-name: box-move3;
}

.loader .box3 div {
  -webkit-animation-name: box-scale3;
  animation-name: box-scale3;
}

.loader .box4 {
  -webkit-animation-name: box-move4;
  animation-name: box-move4;
}

.loader .box4 div {
  -webkit-animation-name: box-scale4;
  animation-name: box-scale4;
}

.loader .box5 {
  -webkit-animation-name: box-move5;
  animation-name: box-move5;
}

.loader .box5 div {
  -webkit-animation-name: box-scale5;
  animation-name: box-scale5;
}

.loader .box6 {
  -webkit-animation-name: box-move6;
  animation-name: box-move6;
}

.loader .box6 div {
  -webkit-animation-name: box-scale6;
  animation-name: box-scale6;
}

.loader .box7 {
  -webkit-animation-name: box-move7;
  animation-name: box-move7;
}

.loader .box7 div {
  -webkit-animation-name: box-scale7;
  animation-name: box-scale7;
}

@-webkit-keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%, 52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

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

@-webkit-keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%, 100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@keyframes ground {
  0%, 65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }

  75%, 90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  }
}

@-webkit-keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ground-shine {
  0%, 70% {
    opacity: 0;
  }

  75%, 87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

@keyframes mask {
  0%, 65% {
    opacity: 0;
  }

  66%, 100% {
    opacity: 1;
  }
}

Toggle prefixes

8.4K views

Copy to Figma

8.4K views

Comments

Variations

MIT License

Copyright - 2024 Admin12121 (Vicky Tajpuriya) 

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.