Spinner

The spinner uses a native <progress> element with a rotating border animation to indicate loading. It inherits currentColor so it automatically matches the surrounding text color.

<progress class="spinner" aria-label="Loading"></progress>

Usage

Apply the spinner class to a <progress> element. Always include an aria-label for screen readers.

<progress class="spinner" aria-label="Loading"></progress>

Sizes

Control the size with width utility classes. The border thickness scales proportionally.

<div class="flex items-center gap-24">
  <progress class="spinner w-16" aria-label="Loading"></progress>
  <progress class="spinner w-24" aria-label="Loading"></progress>
  <progress class="spinner w-32" aria-label="Loading"></progress>
  <progress class="spinner w-40" aria-label="Loading"></progress>
  <progress class="spinner w-48" aria-label="Loading"></progress>
</div>

Class	Size
w-16	16 px
w-24	24 px
w-32	32 px
w-40	40 px
w-48	48 px
—	40 px (default)

Accessibility

• Always add aria-label (e.g. "Loading") so screen readers announce the purpose
• Set aria-busy="true" on the container that is loading content
• Use aria-live="polite" regions to announce when loading completes

<div aria-busy="true" aria-label="Loading results">
  <progress class="spinner" aria-label="Loading"></progress>
</div>

CSS reference

Class	Description
spinner	Animated circular progress indicator
w-16	16 px spinner
w-24	24 px spinner
w-32	32 px spinner
w-40	40 px spinner
w-48	48 px spinner

The spinner respects prefers-reduced-motion through the CSS animation system.