/*  Circle
    <div class="ajax-throbber sk-circle">
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
      <div class="sk-circle-dot"></div>
    </div>
*/

:root {
  --sk-size: 80px;
  --dot-size: 14px;
  --color-active: #4caf50;
  --color-inactive: rgba(76, 175, 80, 0.1);
  --cycle-duration: 1s;
}

.ajax-throbber.sk-circle {
  position: relative;
  width: var(--sk-size);
  height: var(--sk-size);
}

.ajax-throbber .sk-circle-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.ajax-throbber .sk-circle-dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background-color: var(--color-inactive);
  animation: waveColor var(--cycle-duration) linear infinite;
  animation-fill-mode: both;
}

.ajax-throbber .sk-circle-dot:nth-child(1) {
  transform: rotate(0deg);
}
.ajax-throbber .sk-circle-dot:nth-child(2) {
  transform: rotate(45deg);
}
.ajax-throbber .sk-circle-dot:nth-child(3) {
  transform: rotate(90deg);
}
.ajax-throbber .sk-circle-dot:nth-child(4) {
  transform: rotate(135deg);
}
.ajax-throbber .sk-circle-dot:nth-child(5) {
  transform: rotate(180deg);
}
.ajax-throbber .sk-circle-dot:nth-child(6) {
  transform: rotate(225deg);
}
.ajax-throbber .sk-circle-dot:nth-child(7) {
  transform: rotate(270deg);
}
.ajax-throbber .sk-circle-dot:nth-child(8) {
  transform: rotate(315deg);
}

.ajax-throbber .sk-circle-dot:nth-child(1)::before {
  animation-delay: 0s;
}
.ajax-throbber .sk-circle-dot:nth-child(2)::before {
  animation-delay: calc(var(--cycle-duration) * 1 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(3)::before {
  animation-delay: calc(var(--cycle-duration) * 2 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(4)::before {
  animation-delay: calc(var(--cycle-duration) * 3 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(5)::before {
  animation-delay: calc(var(--cycle-duration) * 4 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(6)::before {
  animation-delay: calc(var(--cycle-duration) * 5 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(7)::before {
  animation-delay: calc(var(--cycle-duration) * 6 / 8);
}
.ajax-throbber .sk-circle-dot:nth-child(8)::before {
  animation-delay: calc(var(--cycle-duration) * 7 / 8);
}

@keyframes waveColor {
  0% {
    background-color: var(--color-inactive);
  }
  20% {
    background-color: var(--color-active);
  }
  50% {
    background-color: var(--color-active);
  }
  70% {
    background-color: var(--color-inactive);
  }
  100% {
    background-color: var(--color-inactive);
  }
}