Spinner
A customisable circular progress indicator with chase-ring and fill-ring animations. Supports lifecycle states (loading → success → error) via the useSpinnerLifecycle hook.
core/spinnerInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
A spinner in its default loading state.
Sizes
Pass any pixel value to the size prop.
Lifecycle
Click Start to see the animated loading → completion transition.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 40 | Diameter of the spinner in pixels. |
strokeWidth | number | 4 | Width of the circular track and fill ring. |
isLoading | boolean | false | When true the chase animation runs. |
fillDuration | number | 600 | Duration (ms) of the fill-ring draw animation. |
resetDuration | number | 400 | Duration (ms) of the reset-to-empty animation. |
resetStyle | "converge" | "diverge" | "converge" | Direction rings collapse when resetting. |
fillEasing | string | "ease-in-out" | CSS easing applied to the fill animation. |
trackColor | string | — | Override the track ring colour (defaults to border CSS variable). |