.loader {
  --color: #a5a5b0;
  --size: 30px;
  width: var(--size);
  height: var(--size);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.loader span {
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--color);
  border-radius: 5px;
  animation: keyframes-rotate 2s alternate infinite ease-in-out;
}

.loader span:nth-child(1) {
  animation-delay: 0ms;
}

.loader span:nth-child(2) {
  animation-delay: 50ms;
}

.loader span:nth-child(3) {
  animation-delay: 100ms;
}

.loader span:nth-child(4) {
  animation-delay: 150ms;
}

@keyframes keyframes-rotate {
  50% {
    transform: rotate(360deg);
  }
}