Spinner

A busy indicator. Always give it an accessible name — role="status" + aria-label (or a visually-hidden label). Honors prefers-reduced-motion.

Sizes

Live example

<div class="row">
  <span class="re-spinner" role="status" aria-label="Loading" data-size="sm"></span>
  <span class="re-spinner" role="status" aria-label="Loading"></span>
  <span class="re-spinner" role="status" aria-label="Loading" data-size="lg"></span>
</div>

In a button

Saving…

Live example

<button type="button" class="re-button" aria-busy="true">
  <span
    class="re-spinner"
    data-size="sm"
    aria-hidden="true"
    style="
      border-top-color: currentColor;
      border-color: rgba(255, 255, 255, 0.4);
      margin-inline-end: 0.5rem;
    "
  ></span>
  Saving…
</button>

Accessibility

• Semantics — the <span class="re-spinner"> is decorative on its own. Give a standalone spinner role="status" plus an aria-label (e.g. "Loading") so assistive tech announces it as a live status region with that name. When the spinner sits inside another busy control, mark it aria-hidden="true" and put the busy state on that control instead — the button demo uses aria-busy="true" with its visible “Saving…” text doing the announcing.
• Focus — the spinner is a non-interactive <span>; it is not focusable and takes no keyboard input.
• Notes — the spin animation is disabled under prefers-reduced-motion: reduce. data-size only changes its dimensions, not its accessible name. See the accessibility guide.