<script lang="ts">
  // A fading-blade spinner rather than a rotating arc — rotating a single
  // thin stroke via CSS transform reads as jittery at icon sizes (the arc's
  // sub-pixel edges shimmer each frame). Cycling opacity across fixed blades
  // avoids that entirely and is how native OS spinners do it.
  let { class: className = '' }: { class?: string } = $props()

  const TICKS = 8
  const DUR = 0.9
</script>

<svg viewBox="0 0 24 24" class={className} fill="none" aria-hidden="true">
  {#each Array.from({ length: TICKS }) as _, i (i)}
    <rect
      x="11"
      y="1.5"
      width="2"
      height="6"
      rx="1"
      fill="currentColor"
      opacity="0.15"
      transform="rotate({i * (360 / TICKS)} 12 12)"
    >
      <animate
        attributeName="opacity"
        values="1;0.15"
        keyTimes="0;1"
        dur="{DUR}s"
        begin="{-(i * (DUR / TICKS)).toFixed(3)}s"
        repeatCount="indefinite"
      />
    </rect>
  {/each}
</svg>
