1.loader-spanne-20 {
2  position: relative;
3  width: 100px;
4  height: 30px;
5  padding: 0;
6}
7.loader-spanne-20 > span {
8  position: absolute;
9  right: 0;
10  width: 3px;
11  height: 30px;
12  background-color: rgb(116, 204, 197);
13  display: block;
14  border-radius: 3px;
15  transform-origin: 50% 100%;
16  animation: move 2.8s linear infinite;
17}
18.loader-spanne-20 > span:nth-child(1) {
19  animation-delay: -0.4s;
20}
21.loader-spanne-20 > span:nth-child(2) {
22  animation-delay: -0.8s;
23}
24.loader-spanne-20 > span:nth-child(3) {
25  animation-delay: -1.2s;
26}
27.loader-spanne-20 > span:nth-child(4) {
28  animation-delay: -1.6s;
29}
30.loader-spanne-20 > span:nth-child(5) {
31  animation-delay: -2s;
32}
33.loader-spanne-20 > span:nth-child(6) {
34  animation-delay: -2.4s;
35}
36.loader-spanne-20 > span:nth-child(7) {
37  animation-delay: -2.8s;
38}
39@keyframes move {
40  0% {
41    opacity: 0;
42    transform: translateX(0px) rotate(0deg);
43  }
44  20% {
45    opacity: 1;
46  }
47  40% {
48    transform: translateX(-40px) rotate(0deg);
49  }
50  50% {
51    opacity: 1;
52    transform: translateX(-50px) rotate(22deg);
53  }
54  85% {
55    opacity: 1;
56    transform: translateX(-85px) rotate(60deg);
57  }
58  100% {
59    opacity: 0;
60    transform: translateX(-100px) rotate(65deg);
61  }
62}
63