1.loaderRectangle {
2 display: flex;
3 justify-content: center;
4 align-items: center;
5 gap: 0 3px;
6}
7
8.loaderRectangle div {
9 width: 10px;
10 height: 16px;
11 animation: .9s ease-in-out infinite;
12 background: #183153;
13 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
14}
15
16.loaderRectangle div:nth-child(1) {
17 animation-name: rectangleOneAnim;
18 animation-delay: 1s;
19}
20
21@keyframes rectangleOneAnim {
22 0% {
23  height: 15px;
24 }
25
26 40% {
27  height: 30px;
28 }
29
30 100% {
31  height: 15px;
32 }
33}
34
35.loaderRectangle div:nth-child(2) {
36 animation-name: rectangleTwoAnim;
37 animation-delay: 1.1s;
38}
39
40@keyframes rectangleTwoAnim {
41 0% {
42  height: 15px;
43 }
44
45 40% {
46  height: 40px;
47 }
48
49 100% {
50  height: 15px;
51 }
52}
53
54.loaderRectangle div:nth-child(3) {
55 animation-name: rectangleThreeAnim;
56 animation-delay: 1.2s;
57}
58
59@keyframes rectangleThreeAnim {
60 0% {
61  height: 15px;
62 }
63
64 40% {
65  height: 50px;
66 }
67
68 100% {
69  height: 15px;
70 }
71}
72
73.loaderRectangle div:nth-child(4) {
74 animation-name: rectangleFourAnim;
75 animation-delay: 1.3s;
76}
77
78@keyframes rectangleFourAnim {
79 0% {
80  height: 15px;
81 }
82
83 40% {
84  height: 40px;
85 }
86
87 100% {
88  height: 15px;
89 }
90}
91
92.loaderRectangle div:nth-child(5) {
93 animation-name: rectangleFiveAnim;
94 animation-delay: 1.4s;
95}
96
97@keyframes rectangleFiveAnim {
98 0% {
99  height: 15px;
100 }
101
102 40% {
103  height: 30px;
104 }
105
106 100% {
107  height: 15px;
108 }
109}