Loader by elijahgummer

1.middle {
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  display: inline-block;
12  transform-origin: bottom center;
13  border-top-right-radius: 20px;
14  border-top-left-radius: 20px;
15  box-shadow: 5px 10px 20px inset rgba(255, 23, 25.2);
16  animation: loader 1.2s linear infinite;
17}
18
19.bar1 {
20  animation-delay: 0.1s;
21}
22.bar2 {
23  animation-delay: 0.2s;
24}
25.bar3 {
26  animation-delay: 0.3s;
27}
28.bar4 {
29  animation-delay: 0.4s;
30}
31.bar5 {
32  animation-delay: 0.5s;
33}
34.bar6 {
35  animation-delay: 0.6s;
36}
37.bar7 {
38  animation-delay: 0.7s;
39}
40.bar8 {
41  animation-delay: 0.8s;
42}
43
44@keyframes loader {
45  0% {
46    transform: scaleY(0.1);
47    background: transparent; /* Change background to transparent */
48  }
49  50% {
50    transform: scaleY(1);
51    background: #e74c3c; /* Change background to a shade of red */
52  }
53  100% {
54    transform: scaleY(0.1);
55    background: transparent; /* Change background to transparent */
56  }
57}
58