/* HTML: <div class="loader"></div> */
.loader {
  width: 100px; /* wider to fit 4 dots */
  aspect-ratio: 4; /* keep dots circular */
  background: radial-gradient(circle closest-side, #83612f 90%, #0000) 0% 50%,
    /* light red */
      radial-gradient(circle closest-side, rgb(193, 102, 101) 90%, #0000) 33.3%
      50%,
    /* light orange */ radial-gradient(circle closest-side, #83612f 90%, #0000)
      66.6% 50%,
    /* light yellow */
      radial-gradient(circle closest-side, rgb(193, 102, 101) 90%, #0000) 100%
      50%; /* light green */
  background-size: calc(100% / 4) 50%;
  background-repeat: no-repeat;
  animation: l4 1.2s infinite linear;
}

@keyframes l4 {
  20% {
    background-position: 0% 0%, 33.3% 50%, 66.6% 50%, 100% 50%;
  }
  40% {
    background-position: 0% 100%, 33.3% 0%, 66.6% 50%, 100% 50%;
  }
  60% {
    background-position: 0% 50%, 33.3% 100%, 66.6% 0%, 100% 50%;
  }
  80% {
    background-position: 0% 50%, 33.3% 50%, 66.6% 100%, 100% 0%;
  }
  100% {
    background-position: 0% 50%, 33.3% 50%, 66.6% 50%, 100% 100%;
  }
}

.backdrop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: #a47d43;
}