Spinner Base

<style>
@keyframes ws-spinner-rotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ws-spinner [data-spin] {
    animation: none !important;
    opacity: 0.7;
  }
}
</style>

<div class="ws-spinner" role="status">
  <span class="sr-only">Loading</span>
  <div class="flex items-center gap-8">
    <!-- Small -->
    <div
      data-spin
      class="h-5 w-5 rounded-full border-2 border-[var(--ws-spinner-accent)] border-t-transparent"
      style="animation: ws-spinner-rotate 0.75s linear infinite;"
    ></div>
    <!-- Medium -->
    <div
      data-spin
      class="h-8 w-8 rounded-full border-[3px] border-[var(--ws-spinner-accent)] border-t-transparent"
      style="animation: ws-spinner-rotate 0.75s linear infinite;"
    ></div>
    <!-- Large -->
    <div
      data-spin
      class="h-12 w-12 rounded-full border-4 border-[var(--ws-spinner-accent)] border-t-transparent"
      style="animation: ws-spinner-rotate 0.75s linear infinite;"
    ></div>
  </div>
</div>