1.loader {
2  width: 100px;
3  height: 46px;
4  position: relative;
5  border-bottom: 5px solid #FFF;
6  border-top: 5px solid #FFF;
7  box-sizing: border-box;
8}
9
10.loader:before , .loader:after {
11  content: "";
12  position: absolute;
13  left: 0;
14  top: -20px;
15  width: 32px;
16  height: 32px;
17  border-radius: 50%;
18  background: orange;
19  border: 5px solid #FFF;
20  box-sizing: border-box;
21  animation: slide_391 1s infinite ease-in-out alternate;
22}
23
24.loader:after {
25  top: 20px;
26  animation-direction: alternate-reverse;
27}
28
29@keyframes slide_391 {
30  0% , 20% {
31    transform: translateX(70px)
32  }
33
34  80% , 100% {
35    transform: translateX(-1px)
36  }
37}
38