:root {
  --loader-width: 60px;
  --aspect-ratio: 4;
  --radial-gradient: no-repeat radial-gradient(circle closest-side, #fff 90%, #fff0);
  --background-size: calc(100%/3);
}

.loader {
  width: var(--loader-width);
  aspect-ratio: var(--aspect-ratio);
  background: 
    var(--radial-gradient) 0% 50%,
    var(--radial-gradient) 50% 50%,
    var(--radial-gradient) 100% 50%;
  background-size: var(--background-size) 100%;
  animation: loadingTransition 1s infinite linear;
}

@keyframes loadingTransition {
  33% {
    background-size: var(--background-size) 0%, var(--background-size) 100%, var(--background-size) 100%;
  }
  50% {
    background-size: var(--background-size) 100%, var(--background-size) 0%, var(--background-size) 100%;
  }
  66% {
    background-size: var(--background-size) 100%, var(--background-size) 100%, var(--background-size) 0%;
  }
}