1/* The loader */
2.loader {
3  position: absolute;
4  top: 50%;
5  left: 50%;
6  width: 200px;
7  height: 200px;
8  margin-top: -100px;
9  margin-left: -100px;
10  perspective: 600px;
11  transform-style: perserve-3d;
12}
13
14/* The dot */
15.dot {
16  position: absolute;
17  top: 50%;
18  left: 50%;
19  width: 100px;
20  height: 100px;
21  margin-top: -50px;
22  margin-left: -50px;
23  border-radius: 100px;
24  border: 20px solid #1e3f57;
25  transform-style: perserve-3d;
26  transform: scale(0) rotateX(60deg);
27  animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite;
28}
29
30.dot:nth-child(2) {
31  animation-delay: 200ms;
32}
33
34.dot:nth-child(3) {
35  animation-delay: 400ms;
36}
37
38.dot:nth-child(4) {
39  animation-delay: 600ms;
40}
41
42.dot:nth-child(5) {
43  animation-delay: 800ms;
44}
45
46.dot:nth-child(6) {
47  animation-delay: 1000ms;
48}
49
50.dot:nth-child(7) {
51  animation-delay: 1200ms;
52}
53
54.dot:nth-child(8) {
55  animation-delay: 1400ms;
56}
57
58@keyframes dot {
59  0% {
60    opacity: 0;
61    border-color: #6bb2cd;
62    transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);
63  }
64
65  40% {
66    opacity: 1;
67    transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);
68  }
69
70  100% {
71    opacity: 0;
72    transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);
73  }
74}