1.loader {
2  top: 50%;
3  left: 50%;
4  transform: translate(-50%, -50%);
5  position: absolute;
6}
7
8.bar {
9  width: 10px;
10  height: 70px;
11  background: hsl(0, 100%, 50%);
12  display: inline-block;
13  transform-origin: bottom center;
14  border-top-right-radius: 20px;
15  border-top-left-radius: 20px;
16  animation: loader8913 1.2s linear infinite;
17}
18
19.bar1 {
20  animation-delay: 0.1s;
21}
22
23.bar2 {
24  animation-delay: 0.2s;
25}
26
27.bar3 {
28  animation-delay: 0.3s;
29}
30
31.bar4 {
32  animation-delay: 0.4s;
33}
34
35.bar5 {
36  animation-delay: 0.5s;
37}
38
39.bar6 {
40  animation-delay: 0.6s;
41}
42
43.bar7 {
44  animation-delay: 0.7s;
45}
46
47.bar8 {
48  animation-delay: 0.8s;
49}
50
51@keyframes loader8913 {
52  0% {
53    transform: scaleY(0.1);
54  }
55
56  50% {
57    transform: scaleY(1);
58    background: yellowgreen;
59  }
60
61  100% {
62    transform: scaleY(0.1);
63    background: transparent;
64  }
65}
66