Loader by Christiaan-code

1.loader {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  gap: 30px;
6}
7
8.box-1,
9.box-2,
10.box-3 {
11  width: 1px;
12  height: 115px;
13  border: 1px solid #e9e9e9;
14  background-color: transparent;
15  box-sizing: border-box;
16}
17
18.box-1 {
19  animation: box1animation 3s forwards ease-in-out infinite;
20}
21
22@keyframes box1animation {
23  0% {
24    width: 1px;
25  }
26
27  16.7% {
28    width: 60px;
29  }
30
31  33.3% {
32    width: 60px;
33  }
34
35  50% {
36    width: 1px;
37  }
38
39  100% {
40    width: 1px;
41  }
42}
43
44.box-2 {
45  animation: box2animation 3s forwards ease-in-out infinite;
46}
47
48@keyframes box2animation {
49  0% {
50    width: 1px;
51  }
52
53  33.3% {
54    width: 1px;
55  }
56
57  50% {
58    width: 60px;
59  }
60
61  66.6% {
62    width: 60px;
63  }
64
65  83.3% {
66    width: 1px;
67  }
68
69  100% {
70    width: 1px;
71  }
72}
73
74.box-3 {
75  animation: box3animation 3s forwards ease-in-out infinite;
76}
77
78@keyframes box3animation {
79  0% {
80    width: 60px;
81  }
82
83  16.7% {
84    width: 1px;
85  }
86
87  66.6% {
88    width: 1px;
89  }
90
91  83.3% {
92    width: 60px;
93  }
94
95  100% {
96    width: 60px;
97  }
98}
99