1.loader {
2  position: relative;
3  width: 180px;
4  height: 180px;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  transform-style: preserve-3d;
9  transform: perspective(500px) rotateX(45deg);
10}
11
12.loader span {
13  position: absolute;
14  display: block;
15  border: 15px solid #fff;
16  box-sizing: border-box;
17  border-radius: 50%;
18  box-shadow: 0 10px 0 #e0e0e0, inset 0 10px 0 #e0e0e0;
19  animation: animate_5013 4.5s ease-in-out infinite;
20}
21
22.loader span:nth-child(1) {
23  animation-delay: 0s;
24}
25
26.loader span:nth-child(2) {
27  animation-delay: 1.5s;
28}
29
30.loader span:nth-child(3) {
31  animation-delay: 3s;
32}
33
34@keyframes animate_5013 {
35  0% {
36    transform: translateZ(-100px);
37    width: 100%;
38    height: 100%;
39  }
40
41  25% {
42    transform: translateZ(100px);
43    width: 100%;
44    height: 100%;
45  }
46
47  50% {
48    transform: translateZ(100px);
49    width: 35%;
50    height: 35%;
51  }
52
53  75% {
54    transform: translateZ(-100px);
55    width: 35%;
56    height: 35%;
57  }
58
59  100% {
60    transform: translateZ(-100px);
61    width: 100%;
62    height: 100%;
63  }
64}