1.loader {
2  position: relative;
3  width: 120px;
4  height: 90px;
5  margin: 0 auto;
6}
7
8.loader:before {
9  content: "";
10  position: absolute;
11  bottom: 30px;
12  left: 50px;
13  height: 30px;
14  width: 30px;
15  border-radius: 50%;
16  background: #2a9d8f;
17  animation: loading-bounce 0.5s ease-in-out infinite alternate;
18}
19
20.loader:after {
21  content: "";
22  position: absolute;
23  right: 0;
24  top: 0;
25  height: 7px;
26  width: 45px;
27  border-radius: 4px;
28  box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2;
29  animation: loading-step 1s ease-in-out infinite;
30}
31
32@keyframes loading-bounce {
33  0% {
34    transform: scale(1, 0.7);
35  }
36
37  40% {
38    transform: scale(0.8, 1.2);
39  }
40
41  60% {
42    transform: scale(1, 1);
43  }
44
45  100% {
46    bottom: 140px;
47  }
48}
49
50@keyframes loading-step {
51  0% {
52    box-shadow: 0 10px 0 rgba(0, 0, 0, 0),
53            0 10px 0 #f2f2f2,
54            -35px 50px 0 #f2f2f2,
55            -70px 90px 0 #f2f2f2;
56  }
57
58  100% {
59    box-shadow: 0 10px 0 #f2f2f2,
60            -35px 50px 0 #f2f2f2,
61            -70px 90px 0 #f2f2f2,
62            -70px 90px 0 rgba(0, 0, 0, 0);
63  }
64}