1.loader {
2  position: relative;
3  height: 40px;
4  width: 6px;
5  color: #FFF;
6  animation: paddles 0.75s ease-out infinite;
7}
8
9.loader:before {
10  content: "";
11  position: absolute;
12  margin: 0 auto;
13  left: 0;
14  right: 0;
15  top: 15px;
16  width: 12px;
17  height: 12px;
18  background-color: greenyellow;
19  border-radius: 50%;
20  animation: ballbounce 0.6s ease-out infinite;
21}
22
23@keyframes paddles {
24  0% {
25    box-shadow: -25px -10px, 25px 10px
26  }
27
28  50% {
29    box-shadow: -25px 8px, 25px -10px
30  }
31
32  100% {
33    box-shadow: -25px -10px, 25px 10px
34  }
35}
36
37@keyframes ballbounce {
38  0% {
39    transform: translateX(-20px) scale(1, 1.2)
40  }
41
42  25% {
43    transform: scale(1.2, 1)
44  }
45
46  50% {
47    transform: translateX(15px) scale(1, 1.2)
48  }
49
50  75% {
51    transform: scale(1.2, 1)
52  }
53
54  100% {
55    transform: translateX(-20px)
56  }
57}
58