Spinner
A ring of ticks whose lit arc steps around the circle, in three sizes
Sizes
Accents
In an action
Button loading
Usage
import { Spinner } from "@gpuixui/components/spinner";
<Spinner label="Refreshing revenue" />;
<Spinner size="sm" />;
<Spinner size="lg" accent="muted" label="Archiving" />;size is a step on the theme's icon scale, so a spinner lines up with the text
or glyph beside it. A button takes the same mark through Button's loading
prop instead of composing one.
The anatomy, and why it steps
The reference spinner is a loader circle: one arc of a ring, turning. That
anatomy is what this mark keeps — a ring, a gap, an arc — but the runtime cannot
rotate it. @gpuix/native@0.11.0 publishes no transform, so the ring is
composed from static ticks (spinnerTicks places 12 of them on a circle) and
the lit arc moves instead: the head is opaque, the seven ticks behind it fade
to a fifth, and the other five are empty. One tick advances per interval, so the
gap travels around the circle rather than the ring turning.
MotionProvider preference="reduced" — or reducedMotion on this spinner —
holds the resting arc and schedules no interval. The preview above is a browser
drawing: it paints the same geometry and steps it on the same cadence.
API
| Prop | Type | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
label | string | the provider's loading.busy ("Loading") |
accent | "primary" | "destructive" | "muted" | "on-primary" | "on-secondary" | "on-destructive" | "on-accent" | "on-disabled" | "primary" |
reducedMotion | boolean | the motion provider |
className | string | — |
style | StyleDesc | — |
testId | string | — |
ref / aria-id / onLayout | host props | — |
Edit this page on GitHubpackages/components/docs/spinner.mdx