1.spinner {
2 --gap: 5px;
3 --clr: #d62d20;
4 --height: 23px;
5 width: 100px;
6 height: 100px;
7 display: flex;
8 align-items: center;
9 justify-content: center;
10 gap: var(--gap);
11}
12
13.spinner span {
14 background: var(--clr);
15 width: 6px;
16 height: var(--height);
17 animation: grow 1s ease-in-out infinite;
18}
19
20.spinner span:nth-child(2) {
21 animation: grow 1s ease-in-out 0.15s infinite;
22}
23
24.spinner span:nth-child(3) {
25 animation: grow 1s ease-in-out 0.3s infinite;
26}
27
28.spinner span:nth-child(4) {
29 animation: grow 1s ease-in-out 0.475s infinite;
30}
31
32@keyframes grow {
33 0%,100% {
34  transform: scaleY(1);
35 }
36
37 50% {
38  transform: scaleY(1.8);
39 }
40}