Spinner

Atom
Animated loading spinner in three sizes.
src/atoms/spinner
View in Overlays & feedback

Playground

Every control sets a real prop of SpinnerProps. The JSX below updates as you go.
Loading components
Props
Size
pick one
Tone
pick one
children
string
description
string
stacked
boolean
JSX · SpinnerProps
<Spinner primary>Loading components</Spinner>

Variants

6 examples from src/atoms/spinner/spinner.md, each rendered live from its own JSX.
Loading…
With label
<Spinner>Loading…</Spinner>
Deploying…
About 20 seconds
With description
<Spinner description="About 20 seconds">Deploying…</Spinner>
Working…
Stacked
<Spinner stacked>Working…</Spinner>
Small
<Spinner small />
Large
<Spinner large />
Primary
<Spinner primary />

Sizes

Loading components
small
Loading components
default
Loading components
large

Anatomy

Loading components
1
Ring
2
Label
Dimmed parts appear only in some states or variants.

Props

10 props on SpinnerProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
3 props
children
ReactNode
–
Optional label rendered beside (or below) the indicator in the spinner's 500 14 foreground type. Supplying it turns the bare indicator into a component-owned loading pairing, so the caller never hand-composes a Row/Column + Typography beside a <Spinner />. A bare <Spinner /> (no children) is unchanged.
description
ReactNode
–
Optional muted secondary line rendered under the label (a progress hint, an ETA). Stacks under the label inside the control.
stacked
boolean
false
Layout axis for the label. Omitted/false: the label sits BESIDE the indicator in a snug row (the inline pairing). stacked: the indicator sits over a centered label column (the panel / section-loader form).
Size
pick one
2 props
small
boolean
false
large
boolean
false
Tone
pick one
5 props
primary
boolean
false
muted
boolean
false
foreground
boolean
false
accessibilityLabel
string
–
Accessible description of what is loading. When absent, a string label (children) becomes the accessible name; when neither is present it defaults to "Loading".
testID
string
–
E2E hook forwarded to the root element.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
progressbar
ARIA on web
aria-hidden

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Working…
Web
control 10 · field 10 · card 16 · Instrument Sans
Working…
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Working…
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Spinner />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion

Related components