Loader by Nawsome

1.loader {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  z-index: 10;
6  width: 160px;
7  height: 100px;
8  margin-left: -80px;
9  margin-top: -50px;
10  border-radius: 5px;
11  background: #1e3f57;
12  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
13}
14
15.loader:nth-child(2) {
16  z-index: 11;
17  width: 150px;
18  height: 90px;
19  margin-top: -45px;
20  margin-left: -75px;
21  border-radius: 3px;
22  background: #3c517d;
23  animation-name: dot2_;
24}
25
26.loader:nth-child(3) {
27  z-index: 12;
28  width: 40px;
29  height: 20px;
30  margin-top: 50px;
31  margin-left: -20px;
32  border-radius: 0 0 5px 5px;
33  background: #6bb2cd;
34  animation-name: dot3_;
35}
36
37@keyframes dot1_ {
38  3%,97% {
39    width: 160px;
40    height: 100px;
41    margin-top: -50px;
42    margin-left: -80px;
43  }
44
45  30%,36% {
46    width: 80px;
47    height: 120px;
48    margin-top: -60px;
49    margin-left: -40px;
50  }
51
52  63%,69% {
53    width: 40px;
54    height: 80px;
55    margin-top: -40px;
56    margin-left: -20px;
57  }
58}
59
60@keyframes dot2_ {
61  3%,97% {
62    height: 90px;
63    width: 150px;
64    margin-left: -75px;
65    margin-top: -45px;
66  }
67
68  30%,36% {
69    width: 70px;
70    height: 96px;
71    margin-left: -35px;
72    margin-top: -48px;
73  }
74
75  63%,69% {
76    width: 32px;
77    height: 60px;
78    margin-left: -16px;
79    margin-top: -30px;
80  }
81}
82
83@keyframes dot3_ {
84  3%,97% {
85    height: 20px;
86    width: 40px;
87    margin-left: -20px;
88    margin-top: 50px;
89  }
90
91  30%,36% {
92    width: 8px;
93    height: 8px;
94    margin-left: -5px;
95    margin-top: 49px;
96    border-radius: 8px;
97  }
98
99  63%,69% {
100    width: 16px;
101    height: 4px;
102    margin-left: -8px;
103    margin-top: -37px;
104    border-radius: 10px;
105  }
106}