Skip to main content

Spinner

Loading indicators — twelve variants (ring, chamfer, dots, pulse, bars, orbit, ellipsis, ripple, grid, track, dual, clock), plus tone, size, layout, and accessible status label.

Variants

Ring loading

Ring

Chamfer loading

Chamfer

Dots loading

Dots

Pulse loading

Pulse

Bars loading

Bars

Orbit loading

Orbit

Ellipsis loading

Ellipsis

Ripple loading

Ripple

Grid loading

Grid

Track loading

Track

Dual loading

Dual

Clock loading

Clock

Sizes

Loading small

Loading medium

Loading large

Tones

Accent tone

Muted tone

Ink tone

Visible label

Syncing entries

Uploading…

Inline with text

Saving changes

Saving changes…

Centered section

Loading notebook

On accent surface

Processing

Processing payment…

API

Prop	Required	Type	Default	Description
theme	Optional	SiteTheme	atelier	Visual theme.
mode	Optional	"light" \| "dark"	light	Color mode.
variant	Optional	SpinnerVariant	—	ring, chamfer, dots, pulse, bars, orbit, ellipsis, ripple, grid, track, dual, or clock. Omit for theme default — ring for most themes, chamfer on sage-wedge.
size	Optional	"sm" \| "md" \| "lg"	md	Indicator size.
tone	Optional	"accent" \| "muted" \| "ink" \| "inherit"	accent	Color treatment.
layout	Optional	"inline" \| "centered"	inline	Inline default or centered block for section loading.
label	Optional	string	Loading	Screen reader loading label; also shown when showLabel is set.
showLabel	Optional	boolean	false	Show the label visibly beside or below the indicator.