Loader by catraco

1.loader {
2  --color: #a5a5b0;
3  --size: 30px;
4  width: var(--size);
5  height: var(--size);
6  display: grid;
7  grid-template-columns: repeat(2, 1fr);
8  gap: 2px;
9}
10
11.loader span {
12  width: 100%;
13  height: 100%;
14  background-color: var(--color);
15  animation: keyframes-blink .5s alternate infinite linear;
16}
17
18.loader span:nth-child(1) {
19  animation-delay: 0ms;
20}
21
22.loader span:nth-child(2) {
23  animation-delay: 150ms;
24}
25
26.loader span:nth-child(3) {
27  animation-delay: 150ms;
28}
29
30.loader span:nth-child(4) {
31  animation-delay: 280ms;
32}
33
34@keyframes keyframes-blink {
35  0% {
36    opacity: 0.5;
37    transform: scale(0.5) rotate(20deg);
38  }
39
40  50% {
41    opacity: 1;
42    transform: scale(1);
43  }
44}