Spinner

A semantic wrapper for a loading indicator. Provides ARIA live-region semantics and a visually-hidden text label so screen readers always announce the loading state — regardless of which visual icon you bring.

Features

Bring-your-own visual: any SVG, icon, or animation as children.

Accessible: role="status", aria-live="polite", visually-hidden label.

Hides the decorative visual from screen readers by default.

Renders as a <span> — inline-friendly.

Example

SmallMediumLarge

Saving changesSaving changes…

Anatomy


import { Spinner } from '@wire-ui/react'
 
<Spinner label="Loading">
<svg /* your spinning icon */ />
</Spinner>

Styling

Spinner renders a wrapping <span> with two children: your visual (decorative by default) and a visually-hidden label. Apply animation classes to the SVG, not the wrapper.


<Spinner label="Loading">
  <svg className="size-5 animate-spin">…</svg>
</Spinner>

Using data attributes

Spinner does not set any custom data attributes — it’s purely semantic. Style it with regular class selectors.


/* Scope styles via the inner element */
span[role="status"] svg { animation: spin 1s linear infinite; }

Props

Prop	Type	Default	Description
`label`	`string`	`'Loading'`	Accessible label announced to screen readers
`decorative`	`boolean`	`true`	Hides the visual element from screen readers (label still announced)
`...rest`	`HTMLAttributes<HTMLSpanElement>`	—	All standard HTML span attributes

Accessibility

Wrapper has role="status" and aria-live="polite" — screen readers announce changes to the label.
The visual is wrapped in an aria-hidden span when decorative is true (the default).
The text label is rendered in a visually-hidden span so it’s announced but not seen.
Spinner does not include an animation — bring your own (CSS animation, SVG <animateTransform>, etc.).