Loader by Admin12121

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