Loader by Subaashbala

1.loaderContainer {
2  display: flex;
3  width: 9em;
4  overflow: hidden;
5  gap: 0.5em;
6}
7.particleContainer {
8  display: flex;
9  gap: 0.5em;
10  animation: slide 2000ms linear infinite;
11}
12.particleContainer div {
13  width: 2.5em;
14  aspect-ratio: 1;
15  border-radius: 5px;
16  background: black;
17  transform-origin: left bottom;
18  animation: squeeze 750ms ease-in-out infinite;
19}
20.particleContainer div:nth-child(2) {
21  animation-delay: 50ms;
22}
23.particleContainer div:last-child {
24  animation-delay: 100ms;
25}
26@keyframes squeeze {
27  0% {
28    transform: scale(1) translateY(0);
29  }
30  50% {
31    transform: scale(0.75);
32  }
33  75% {
34    transform: scale(1.05);
35  }
36  100% {
37    transform: sclae(1);
38  }
39}
40@keyframes slide {
41  from {
42    transform: translateX(0%);
43  }
44  to {
45    transform: translateX(calc(-50% + 1.25em));
46  }
47}
48