Spinner
Indeterminate loading indicator with four animated visual variants — circular arc, bouncing rings, moon orbit, and pulsing dots.
Spinner is a stateless indeterminate loading indicator. Choose from four visual styles via the variant parameter: Circular (default), Bounce, Moon, and Pulse. The size and color parameters apply to all variants; strokeWidth is respected only by Circular and Moon.
Basic usage
Bounce variant
Two concentric circles pulse in and out with a staggered half-cycle offset, producing a ripple effect.
Moon variant
A faint full-circle track is drawn at 30 % opacity; a short 30° arc orbits it continuously, evoking a crescent moon chasing its tail.
Pulse variant
Three dots scale in and out in sequence with a 160 ms stagger between each, creating a left-to-right wave.
API reference
Spinner
| Parameter | Type | Default | Description |
|---|---|---|---|
modifier | Modifier | Modifier | Applied to the spinner container. |
variant | SpinnerVariant | SpinnerVariant.Circular | Visual style of the animation. |
size | Dp | 40.dp | Overall bounding size of the spinner. |
color | Color | MaterialTheme.styles.primary | Primary colour used for the animation. |
strokeWidth | Dp | 3.dp | Stroke width for Circular and Moon variants; ignored by Bounce and Pulse. |
SpinnerVariant
| Value | Description |
|---|---|
Circular | Rotating 270° arc — the default. Completes one revolution every 1 200 ms with linear easing. |
Bounce | Two concentric filled circles that scale in and out with a staggered half-cycle phase offset. |
Moon | Full-circle track at 30 % opacity with a short orbiting arc. One revolution every 1 000 ms with ease-in-out. |
Pulse | Three dots in a row, each scaling up and back down in sequence with 160 ms between each dot. |