Spinner

Basic

Use .spinner with role="status" and a visually hidden label so screen readers announce the loading state. The default is a spinning border ring.

Grow

Add .spinner--grow for a pulsing dot. Same markup, same a11y story.

Colors

Both spinners inherit from currentColor, so any .text-* utility recolors them.

The grow variant takes the same utilities.

Sizes

Add .spinner--sm for the compact size used inside buttons and badges, or .spinner--lg for an empty-state hero.

For one-off sizes, override --spinner-size inline.

Alignment

Spinners are inline-block, so flex and margin utilities place them like any other inline element.

In buttons

For the canonical icon-aware loading state, set aria-busy="true" on the button. It swaps any leading or trailing icon for the spinner without shifting the label. For a standalone spinner, slot .spinner.spinner--sm as a leading element.

For a standalone spinner inside a button, slot .spinner.spinner--sm as a leading element.

Customization

These variables retune .spinner without touching component CSS. Color comes from currentColor, so any .text-* utility recolors it.