docs / core / spinner
Spinner
the spinning loading state for work with no measurable end. PageLoader centers one when a whole region is waiting.
intensity · recedesrsc · server
provenance
authored in usvalayer
core / primitivesintensity
recedes · safe anywhere, including dense surfacescomposition
inline beside text, or inside Button via its status machinePageLoader fills a route or panel while its data arrivesnot a progress bar. it promises nothing about durationone per region. two spinners is one loading state told twicea11y
role="status" with an sr-only label · animation stops under reduced motion · PageLoader's visible caption is aria-hiddenjest-axedependencies
class-variance-authoritylive demo · try it out
Loading
customize
variantanimation style
sizediameter and stroke weight
tonecurrent drops the glow, inherits text colour
labelscreen reader text
usage
import { Spinner } from "@usva-ui/react/primitives/spinner";
<Spinner />props
| prop | type | default | notes |
|---|---|---|---|
| variant | "ring" | "dots" | "bars" | "orbit" | "ring" | animation style. ring is the general default; orbit is the loudest. |
| size | "sm" | "md" | "lg" | "md" | diameter and stroke weight. |
| tone | "accent" | "current" | "accent" | current inherits the parent's text colour and drops the glow. what a spinner uses inside a filled Button. |
| label | string | "Loading" | the screen reader text. say what is loading when you can. |
get it
bun add @usva-ui/reactusage
import { PageLoader, Spinner } from "@usva-ui/react/primitives/spinner";
<Spinner variant="dots" size="sm" />
<PageLoader variant="orbit" label="Loading your workspace" />