1.loading {
2 --speed-of-animation: 0.9s;
3 --gap: 6px;
4 --first-color: #4c86f9;
5 --second-color: #49a84c;
6 --third-color: #f6bb02;
7 --fourth-color: #f6bb02;
8 --fifth-color: #2196f3;
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 width: 100px;
13 gap: 6px;
14 height: 100px;
15}
16
17.loading span {
18 width: 4px;
19 height: 50px;
20 background: var(--first-color);
21 animation: scale var(--speed-of-animation) ease-in-out infinite;
22}
23
24.loading span:nth-child(2) {
25 background: var(--second-color);
26 animation-delay: -0.8s;
27}
28
29.loading span:nth-child(3) {
30 background: var(--third-color);
31 animation-delay: -0.7s;
32}
33
34.loading span:nth-child(4) {
35 background: var(--fourth-color);
36 animation-delay: -0.6s;
37}
38
39.loading span:nth-child(5) {
40 background: var(--fifth-color);
41 animation-delay: -0.5s;
42}
43
44@keyframes scale {
45 0%, 40%, 100% {
46  transform: scaleY(0.05);
47 }
48
49 20% {
50  transform: scaleY(1);
51 }
52}