Loader by Pradeepsaranbishnoi

1/* The loader container */
2.loader {
3  width: 200px;
4  height: 200px;
5  perspective: 200px;
6}
7
8
9/* The dot */
10.dot {
11  position: absolute;
12  top: 50%;
13  left: 50%;
14  width: 120px;
15  height: 120px;
16  margin-top: -60px;
17  margin-left: -60px;
18  border-radius: 100px;
19  border: 40px outset #1e3f57;
20  transform-origin: 50% 50%;
21  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
22  background-color: transparent;
23  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
24}
25
26.dot:nth-child(2) {
27  width: 140px;
28  height: 140px;
29  margin-top: -70px;
30  margin-left: -70px;
31  border-width: 30px;
32  border-color: #447891;
33  animation-name: dot2;
34  animation-delay: 75ms;
35  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
36  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
37}
38
39.dot:nth-child(3) {
40  width: 160px;
41  height: 160px;
42  margin-top: -80px;
43  margin-left: -80px;
44  border-width: 20px;
45  border-color: #6bb2cd;
46  animation-name: dot3;
47  animation-delay: 150ms;
48  box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
49  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
50}
51
52@keyframes dot1 {
53  0% {
54    border-color: #1e3f57;
55    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
56  }
57
58  50% {
59    border-color: #1e574f;
60    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
61  }
62
63  100% {
64    border-color: #1e3f57;
65    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
66  }
67}
68
69@keyframes dot2 {
70  0% {
71    border-color: #447891;
72    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
73    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
74  }
75
76  50% {
77    border-color: #449180;
78    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
79    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
80  }
81
82  100% {
83    border-color: #447891;
84    box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
85    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
86  }
87}
88
89@keyframes dot3 {
90  0% {
91    border-color: #6bb2cd;
92    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
93    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
94  }
95
96  50% {
97    border-color: #6bcdb2;
98    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.8);
99    transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px);
100  }
101
102  100% {
103    border-color: #6bb2cd;
104    box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.1);
105    transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
106  }
107}