On this page:

Spinner

Note

A component that organizes content into vertically stacked collapsible and expandable sections.

Design checklist

Status	Item	Description
✔️	Anatomy	Includes descriptions of all parts of the component and its major variants.
✔️	States	Includes all applicable interaction, display and value states.
✔️	Options	Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.)
✔️	Color schemes	Includes both light and dark color schemes.
	Behaviors	Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow).

Anatomy

Spinner container: The outer span element with class spinner.
SVG loader: The SVG element rendered inside the spinner, varies by variant prop.
Variants: Circular, Dotted, Sunburst (SVG structure changes).

States

Default: Spinner animates to indicate loading.
Color: Controlled by color prop (neutral or accent).
Size: Controlled by size prop (sm, md, lg, xl).
Variant: Controlled by variant prop (circular, dotted, sunburst).

Options

variant: 'circular' | 'dotted' | 'sunburst' (default: 'circular')
color: 'neutral' | 'accent' (default: 'neutral')
size: 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
...spanProps: All native span element props

Behaviors

Spinner animates continuously to indicate loading.
No user interaction; purely visual feedback.
Responsive to color scheme (light/dark) via CSS variables.

Changelog

Date	Type	Description	Author	Associated issue(s)
YYYY-MM-DD	new	Initial design	Oanh Nguyen	PAR-52