Loader by Timeless-Eve

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