Spinner
Animated 12-dot loading indicator. Renders role="status" with aria-label="Loading".
Preview
Preview
Usage
import { Spinner } from '@wire-ui/react'
<Spinner />
<Spinner size="large" />
<Spinner size="small" color="#6366f1" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | 'medium' | Controls data-size |
color | string | — | Sets the --spinner-color CSS variable |
...rest | HTMLAttributes<HTMLDivElement> | — | Spread onto root element |
CSS variable
The color prop sets --spinner-color on the root element. Override it in CSS if you prefer:
.my-spinner { --spinner-color: #6366f1; }Accessibility
role="status"announces the loading state to screen readersaria-label="Loading"provides a text description
Last updated on