1.loader {
2  display: block;
3  position: relative;
4  height: 32px;
5  width: 140px;
6  border: 3px solid #fff;
7  border-radius: 20px;
8  box-sizing: border-box;
9  animation: balancing 2s linear infinite alternate;
10  transform-origin: center center;
11}
12
13.loader:before {
14  content: '';
15  position: absolute;
16  left: 0;
17  bottom: 0;
18  width: 52px;
19  height: 26px;
20  border-radius: 20px;
21  background: gold;
22  animation: ballbns 2s linear infinite alternate;
23}
24
25@keyframes ballbns {
26  0% {
27    left: 0;
28    transform: translateX(0%);
29  }
30
31  100% {
32    left: 100%;
33    transform: translateX(-100%);
34  }
35}
36
37@keyframes balancing {
38  0% {
39    transform: rotate(-25deg);
40  }
41
42  50% {
43    transform: rotate(0deg);
44  }
45
46  100% {
47    transform: rotate(25deg);
48  }
49}
50