1.loader {
2  height: 50px;
3  display: flex;
4  align-items: flex-end;
5  gap: 3px;
6}
7
8.bar {
9  height: 5px;
10  width: 12px;
11  animation-duration: 0.45s;
12  animation-name: changeHeight;
13  animation-iteration-count: infinite;
14  animation-direction: alternate;
15}
16
17.red {
18  background-color: #E50000;
19  box-shadow: 1px 1px 10px #E50000;
20  animation-delay: 0.10s;
21}
22
23.orange {
24  background-color: #FF8D00;
25  box-shadow: 1px 1px 10px #FF8D00;
26  animation-delay: 0.20s;
27}
28
29.yellow {
30  background-color: #FFEE00;
31  box-shadow: 1px 1px 10px #FFEE00;
32  animation-delay: 0.25s;
33}
34
35.green {
36  background-color: #008121;
37  box-shadow: 1px 1px 10px #008121;
38  animation-delay: 0.30s;
39}
40
41.blue {
42  background-color: #004CFF;
43  box-shadow: 1px 1px 10px #004CFF;
44  animation-delay: 0.35s;
45}
46
47.violet {
48  background-color: #760188;
49  box-shadow: 1px 1px 10px #760188;
50  animation-delay: 0.40s;
51}
52
53@keyframes changeHeight {
54  from {
55    height: 5px;
56  }
57
58  to {
59    height: 40px;
60  }
61}