Spinner

Sizes

Colors

In buttons

When the Button's text already announces the state (Saving / Loading), pass decorative on the Spinner so screen readers don't double-announce.

In context

Inline next to visible status text — same rule applies, mark the spinner decorative so the announcement comes from the actual message, not the generic "Loading".

Standalone with custom label

When the spinner appears without a visible label, set label so the screen-reader announcement is meaningful and translatable. The default "Loading" works but is generic.

Reduced motion

Under prefers-reduced-motion: reduce, the spin slows to a 3-second cycle (from the default ~1s). The loading semantic stays — only the motion intensity drops. Enable the OS-level setting to see the effect.