.loading {
  --animationDuration: 0.8s;
  --delayPerItem: calc(var(--animationDuration) / 8);

  & circle {
    animation: fadeInOut var(--animationDuration) infinite linear both;
    transform-origin: center;

    &:nth-child(2) {
      animation-delay: calc(var(--delayPerItem) * -7);
    }
    &:nth-child(3) {
      animation-delay: calc(var(--delayPerItem) * -6);
    }
    &:nth-child(4) {
      animation-delay: calc(var(--delayPerItem) * -5);
    }
    &:nth-child(5) {
      animation-delay: calc(var(--delayPerItem) * -4);
    }
    &:nth-child(6) {
      animation-delay: calc(var(--delayPerItem) * -3);
    }
    &:nth-child(7) {
      animation-delay: calc(var(--delayPerItem) * -2);
    }
    &:nth-child(8) {
      animation-delay: calc(var(--delayPerItem) * -1);
    }
  }
}

@keyframes fadeInOut {
  0%,
  20%,
  80%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}