<div class="loading-spinner">
  <span class="dot" style="--i: 0"></span>
  <span class="dot" style="--i: 1"></span>
  <span class="dot" style="--i: 2"></span>
  <span class="dot" style="--i: 3"></span>
  <span class="dot" style="--i: 4"></span>
  <span class="dot" style="--i: 5"></span>
  <span class="dot" style="--i: 6"></span>
  <span class="dot" style="--i: 7"></span>
</div>

@layer reset, base, spinner;

@layer spinner {
  .loading-spinner {
    --spinnerDiameter: 40px; /* スピナーの直径 */
    --spinnerRadius: calc(var(--spinnerDiameter) / 2); /* スピナーの半径 */
    --dotCount: 8; /* ドットの数 */
    --dotDiameter: 8px; /* ドットの直径 */
    
    position: relative;
    width: calc(var(--spinnerDiameter) + var(--dotDiameter));
    aspect-ratio: 1;
    padding: calc(var(--dotDiameter) / 2);
  }
  .dot {
    --angle: calc((360deg / var(--dotCount)) * var(--i));
    --x: calc(var(--spinnerRadius) * cos(var(--angle))); /* r cosθ */
    --y: calc(var(--spinnerRadius) * sin(var(--angle))); /* r sinθ */
    
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(var(--x) - 50%) calc(var(--y) - 50%);
    scale: 0;
    display: inline-block;
    width: var(--dotDiameter);
    aspect-ratio: 1;
    background: #ededed;
    border-radius: 50%;
    
    /* Animation Settings */
    --duration: 1s;
    --delay: calc(var(--duration) * (var(--i) / var(--dotCount)));
    animation: loadingAnimation var(--duration) var(--delay) infinite ease-in-out;
  }
  
  @keyframes loadingAnimation {
    50% {
      scale: 1;
      background-color: #7e7e7e;
    }
  }
}

@import '@acab/reset.css' layer(reset);

@layer base {
  * {
    box-sizing: border-box;
  }
  body {
    display: grid;
    place-items: center;
    height: 100dvh;
  }
}