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}
