Primitives
Spinner
An activity indicator drawn as a ring whose lit arc steps around the circle, because the runtime cannot rotate
Sizes
Accents
Usage
import { Spinner, Stack, Text } from "@gpuixui/primitives";
<Stack direction="row" align="center" gap="sm">
<Spinner label="Refreshing revenue" />
<Text role="caption" tone="muted">Refreshing…</Text>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
size | IconSize | number | "md" | the ring's side: a theme step, or raw pixels |
accent | primary | destructive | muted | on-primary | on-secondary | on-destructive | on-accent | on-disabled | "primary" | the role every tick paints; a stored name the table does not carry reads as primary |
label | string | loading.busy ("Loading") | accessible name announced as a status; a blank one paints the ring as decoration (no node to walk into) |
reducedMotion | boolean | the motion provider | holds the resting arc and schedules no interval; the prop overrides the provider |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last |
ref / aria-id / onLayout | host props | none | the indicator's own box: the group a layout measures, the instance a caller holds, and the author id an automation host addresses |
testId | string | — | stable locator |
How the ring moves
The runtime paints a box and its opacity, and nothing else: it cannot rotate. So
the ring is SPINNER_RING_TICKS (12) static ticks placed on a circle by
spinnerTicks, and the lit arc moves instead — one head fully opaque, the
SPINNER_ARC_TICKS (7) behind it fading to SPINNER_FADE_FLOOR (0.2), the rest
of the ring empty. The head advances one tick per interval. That gap is what
reads as a turning arc; nothing rotates.
Edit this page on GitHubpackages/primitives/docs/spinner.mdx