/* HTML: <div class="loader"></div> */
.loader-box {
    width: 32px;
    display: grid;
    place-content: center;
}

.loader-box.--hidden {
    display: none;
}

.loader {
    width: 8px;
    aspect-ratio: 1;
    border-radius: 4px;
    animation: l5 1s infinite linear alternate;
  }
  @keyframes l5 {
      0%  {box-shadow: -12px 0 #fff, 12px 0 #333;background: #333 }
      33% {box-shadow: -12px 0 #fff, 12px 0 #333;background: #fff}
      66% {box-shadow: -12px 0 #333, 12px 0 #fff; background: #fff}
      100%{box-shadow: -12px 0 #333, 12px 0 #fff; background: #333 }
  }