.ob-loader {
  width: 60px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 100%;
  animation: dots 1s infinite linear;
  --w: calc(100% / 3);
}

@keyframes dots {
  0% {
    background-size:
      var(--w) 100%,
      var(--w) 100%,
      var(--w) 100%;
  }

  33% {
    background-size:
      var(--w) 0%,
      var(--w) 100%,
      var(--w) 100%;
  }

  50% {
    background-size:
      var(--w) 100%,
      var(--w) 0%,
      var(--w) 100%;
  }

  66% {
    background-size:
      var(--w) 100%,
      var(--w) 100%,
      var(--w) 0%;
  }

  100% {
    background-size:
      var(--w) 100%,
      var(--w) 100%,
      var(--w) 100%;
  }
}

.ob-loader.white {
  --_g: no-repeat radial-gradient(circle closest-side, #fff 90%, #fff0);
}