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, 255, 0, 0.8); /* Yellow box shadow */
16  animation: loader 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 loader {
52  0% {
53    transform: scaleY(0.1);
54    background: transparent;
55    /* Change background to transparent */
56  }
57
58  50% {
59    transform: scaleY(1);
60    background: linear-gradient(
61      to bottom,
62      #ffd700,
63      #ffff00
64    ); /* Gradient from gold to yellow */
65  }
66
67  100% {
68    transform: scaleY(0.1);
69    background: transparent;
70  }
71}
72