1.loader {
2  position: relative;
3  width: 300px;
4  height: 300px;
5  transform-style: preserve-3d;
6  transform: perspective(500px) rotateX(60deg);
7}
8
9.loader span {
10  position: absolute;
11  display: block;
12  border: 5px solid #fff;
13  box-shadow: 0 5px 0 #ccc;
14  inset: 0 5px 0 #ccc;
15  box-sizing: border-box;
16  border-radius: 50%;
17  animation: animate 3s ease-in-out infinite;
18}
19@keyframes animate {
20  0%,
21  100% {
22    transform: translateZ(-100px);
23  }
24
25  50% {
26    transform: translateZ(100px);
27  }
28}
29@keyframes animate {
30  0%,
31  100% {
32    transform: translateZ(-100px);
33    background-color: #ff000012; /* Change the color at 0% and 100% */
34  }
35
36  50% {
37    transform: translateZ(100px);
38    background-color: #00ff0012; /* Change the color at 50% */
39  }
40}
41.loader span:nth-child(1) {
42  top: 0;
43  left: 0;
44  bottom: 0;
45  right: 0;
46  animation-delay: 1.4s;
47}
48
49.loader span:nth-child(2) {
50  top: 10px;
51  left: 10px;
52  bottom: 10px;
53  right: 10px;
54  animation-delay: 1.3s;
55}
56
57.loader span:nth-child(3) {
58  top: 20px;
59  left: 20px;
60  bottom: 20px;
61  right: 20px;
62  animation-delay: 1.2s;
63}
64
65.loader span:nth-child(4) {
66  top: 30px;
67  left: 30px;
68  bottom: 30px;
69  right: 30px;
70  animation-delay: 1.1s;
71}
72
73.loader span:nth-child(5) {
74  top: 40px;
75  left: 40px;
76  bottom: 40px;
77  right: 40px;
78  animation-delay: 1s;
79}
80
81.loader span:nth-child(6) {
82  top: 50px;
83  left: 50px;
84  bottom: 50px;
85  right: 50px;
86  animation-delay: 0.9s;
87}
88
89.loader span:nth-child(7) {
90  top: 60px;
91  left: 60px;
92  bottom: 60px;
93  right: 60px;
94  animation-delay: 0.8s;
95}
96
97.loader span:nth-child(8) {
98  top: 70px;
99  left: 70px;
100  bottom: 70px;
101  right: 70px;
102  animation-delay: 0.7s;
103}
104
105.loader span:nth-child(9) {
106  top: 80px;
107  left: 80px;
108  bottom: 80px;
109  right: 80px;
110  animation-delay: 0.6s;
111}
112
113.loader span:nth-child(10) {
114  top: 90px;
115  left: 90px;
116  bottom: 90px;
117  right: 90px;
118  animation-delay: 0.5s;
119}
120
121.loader span:nth-child(11) {
122  top: 100px;
123  left: 100px;
124  bottom: 100px;
125  right: 100px;
126  animation-delay: 0.4s;
127}
128
129.loader span:nth-child(12) {
130  top: 110px;
131  left: 110px;
132  bottom: 110px;
133  right: 110px;
134  animation-delay: 0.3s;
135}
136
137.loader span:nth-child(13) {
138  top: 120px;
139  left: 120px;
140  bottom: 120px;
141  right: 120px;
142  animation-delay: 0.2s;
143}
144
145.loader span:nth-child(14) {
146  top: 130px;
147  left: 130px;
148  bottom: 130px;
149  right: 130px;
150  animation-delay: 0.1s;
151}
152
153.loader span:nth-child(15) {
154  top: 140px;
155  left: 140px;
156  bottom: 140px;
157  right: 140px;
158  animation-delay: 0s;
159}
160