Back to Motion Prompt examples
UI component names · #22
Spinner
A spinning circle that means "please wait". Clicking "Send" washes the card white and a blue arc spins in the middle; when finished it changes to a check and fades.
Navigation & statusspinnerloadingloaderactivity-indicatorprogress-circlebusy
Full motion specification
How the movement works
Use it for short waits of unknown length, such as sending or saving.
- 014.5 s cycle on a 542×191 card. The cursor clicks "Send" (120×40, bottom centre) at 1.0 s.
- 02Over 1.05–1.2 s (linear) a white scrim (opacity 0.78) and the spinner fade in over the whole card.
- 03Spinner at (271, 92): a pale ring, radius 26, 6 thick, with a blue 243° (1.35π) arc on top (round caps), turning 1.3 times per second (468°/s).
- 04Over 2.95–3.05 s the spinner fades; over 2.95–3.2 s a blue circle (radius 28) with a white check scales 0.7 → 1 (easeOutCubic).
- 05Everything fades out linearly over 3.75–4.0 s.
Prompt
While sending, show a spinner over the form, turning a little over once per second, then replace it with a blue check when done.