Loader by mobinkakei

1.wrapper {
2  width: 200px;
3  height: 60px;
4  position: relative;
5  z-index: 1;
6}
7
8.circle {
9  width: 20px;
10  height: 20px;
11  position: absolute;
12  border-radius: 50%;
13  background-color: #fff;
14  left: 15%;
15  transform-origin: 50%;
16  animation: circle7124 .5s alternate infinite ease;
17}
18
19@keyframes circle7124 {
20  0% {
21    top: 60px;
22    height: 5px;
23    border-radius: 50px 50px 25px 25px;
24    transform: scaleX(1.7);
25  }
26
27  40% {
28    height: 20px;
29    border-radius: 50%;
30    transform: scaleX(1);
31  }
32
33  100% {
34    top: 0%;
35  }
36}
37
38.circle:nth-child(2) {
39  left: 45%;
40  animation-delay: .2s;
41}
42
43.circle:nth-child(3) {
44  left: auto;
45  right: 15%;
46  animation-delay: .3s;
47}
48
49.shadow {
50  width: 20px;
51  height: 4px;
52  border-radius: 50%;
53  background-color: rgba(0,0,0,0.9);
54  position: absolute;
55  top: 62px;
56  transform-origin: 50%;
57  z-index: -1;
58  left: 15%;
59  filter: blur(1px);
60  animation: shadow046 .5s alternate infinite ease;
61}
62
63@keyframes shadow046 {
64  0% {
65    transform: scaleX(1.5);
66  }
67
68  40% {
69    transform: scaleX(1);
70    opacity: .7;
71  }
72
73  100% {
74    transform: scaleX(.2);
75    opacity: .4;
76  }
77}
78
79.shadow:nth-child(4) {
80  left: 45%;
81  animation-delay: .2s
82}
83
84.shadow:nth-child(5) {
85  left: auto;
86  right: 15%;
87  animation-delay: .3s;
88}
89