M3 Spinner
M3 Spinner
Sizes
Six presets from inline (xs) to hero/splash (xxl).
Loading
xs24px — Inline / ButtonsLoading
sm32px — Compact areasLoading
md48px — Default content loadingLoading
lg64px — Section loadingLoading
xl96px — Full-page loadingLoading
xxl154px — Hero / splash loadingSpeeds
Three speed presets. Normal is the default.
Loading
SlowLoading
NormalLoading
FastSize x Speed Grid
Every combination.
| Size \ Speed | Slow | Normal | Fast |
|---|---|---|---|
| xs | Loading | Loading | Loading |
| sm | Loading | Loading | Loading |
| md | Loading | Loading | Loading |
| lg | Loading | Loading | Loading |
| xl | Loading | Loading | Loading |
| xxl | Loading | Loading | Loading |
On Dark Surface
The spinner adapts to dark backgrounds via CSS variable theming.
Loading
Loading
Loading
Loading
Loading
Content Loading Pattern
How it looks as a centered page loader — the pattern used in list and detail pages.
Loading
Inline Usage
The xs and sm sizes work well inline with text and buttons.
Loading
Loading data...