Loader by gsperandio

1.cubes {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform-style: preserve-3d;
6}
7
8.loop {
9  transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);
10}
11
12@keyframes s {
13  to {
14    transform: scale3d(0.2, 0.2, 0.2);
15  }
16}
17
18.item {
19  margin: -1.5625em;
20  width: 3.125em;
21  height: 3.125em;
22  transform-origin: 50% 50% -1.5625em;
23  box-shadow: 0 0 0.125em currentColor;
24  background: currentColor;
25  animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;
26}
27
28.item:before,
29.item:after {
30  position: absolute;
31  width: inherit;
32  height: inherit;
33  transform-origin: 0 100%;
34  box-shadow: inherit;
35  background: currentColor;
36  content: "";
37}
38
39.item:before {
40  bottom: 100%;
41  transform: rotateX(90deg);
42}
43
44.item:after {
45  left: 100%;
46  transform: rotateY(90deg);
47}
48
49.item:nth-child(1) {
50  margin-top: 6.25em;
51  color: #fe1e52;
52  animation-delay: -1.2s;
53}
54
55.item:nth-child(1):before {
56  color: #ff6488;
57}
58
59.item:nth-child(1):after {
60  color: #ff416d;
61}
62
63.item:nth-child(2) {
64  margin-top: 3.125em;
65  color: #fe4252;
66  animation-delay: -1s;
67}
68
69.item:nth-child(2):before {
70  color: #ff8892;
71}
72
73.item:nth-child(2):after {
74  color: #ff6572;
75}
76
77.item:nth-child(3) {
78  margin-top: 0em;
79  color: #fe6553;
80  animation-delay: -0.8s;
81}
82
83.item:nth-child(3):before {
84  color: #ffa499;
85}
86
87.item:nth-child(3):after {
88  color: #ff8476;
89}
90
91.item:nth-child(4) {
92  margin-top: -3.125em;
93  color: #fe8953;
94  animation-delay: -0.6s;
95}
96
97.item:nth-child(4):before {
98  color: #ffb999;
99}
100
101.item:nth-child(4):after {
102  color: #ffa176;
103}
104
105.item:nth-child(5) {
106  margin-top: -6.25em;
107  color: #feac54;
108  animation-delay: -0.4s;
109}
110
111.item:nth-child(5):before {
112  color: #ffce9a;
113}
114
115.item:nth-child(5):after {
116  color: #ffbd77;
117}
118
119.item:nth-child(6) {
120  margin-top: -9.375em;
121  color: #fed054;
122  animation-delay: -0.2s;
123}
124
125.item:nth-child(6):before {
126  color: #ffe49a;
127}
128
129.item:nth-child(6):after {
130  color: #ffda77;
131}