Loader by akshat-patel28

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