imitation

Spin

A loading indicator, alone or over content that dims while it loads.

LoadingFour indicators; pick one for the whole app

drums

hourglass

papers

classic

Small

Large

In context

ProjectsThe list dims and stops taking clicks while it refreshes

Projects

Harbour rebrand

On track

Tideline mobile

Review

Crew interviews

Late

Rota export

Done

Depot signage

Review

Syncing

Props

Prop	Type	Required	Default
`spinning`	`boolean \| undefined`	No	true
`size`	`SpinSize \| undefined`	No	md
`variant`	`SpinVariant \| undefined`	No	drums
`tip`	`string \| undefined`	No	—
`className`	`string \| undefined`	No	—
`bionic`	`boolean \| undefined`	No	—
`bionicOptions`	`BionicOptions \| undefined`	No	—
`delayMs`	`number \| undefined`	No	—
`minDurationMs`	`number \| undefined`	No	—

Accessibility

role="status" with an aria-label of the tip text (or "Loading" if none given) — announced once by assistive tech without needing a separate live region. Wrapped content gets aria-busy="true" and is visually dimmed and non-interactive while spinning.

data-rebar-* attributes

data-rebar-component="spin", data-rebar-part="content" | "overlay" | "indicator" | "tip". Note that variant="classic" always renders .rebar-spin-icon-vector — the other three variants only fall back to it under [data-theme="dark"], since their raster art has no other way to adapt to a dark background.

Migrating to Ant Design

AntD's Spin has the same spinning/tip/children-wrapping shape and a comparable size union — a close, low-risk rename, not yet codemod-covered. variant has no AntD equivalent (AntD's own indicator isn't swappable this way) — drop it during migration, or pass a custom indicator element built from AntD's own icon set to keep a similar look.