Spinner

A discreet indicator with an accessible, contextual description.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add spinner

What add spinner installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Inherits the text color; adjust the size with utilities.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`label` Accessible name of the status (role="status").	`string`	`"Loading"`
`className` Size and color through utilities.	`string`	—

The states that apply to this component and their visual treatment.

State	Treatment
Active	Spins and exposes role="status" with a configurable label.
Reduced motion	Stops with prefers-reduced-motion; it does not fake progress.

Exposes role="status" and a configurable aria-label; change the label to match the operation.

Stops with prefers-reduced-motion; it does not communicate made-up progress or percentages.