Back to Motion Prompt examples
UI component names · #20
Step indicator
Shows which step of a process you are on. Each click on "Next" turns the next of four step circles into a check and extends the blue line to the following step.
Navigation & statusstep-indicatorstepperstepsprogress-stepswizardmulti-stepcheckout
Full motion specification
How the movement works
Use it in multi-step flows such as sign-up or checkout to show progress and what is left.
- 014.5 s cycle on a 542×191 card. Four steps ("Details, Review, Payment, Done" in Japanese) at x 80, 207, 334, 461, y 35; circles of radius 17 joined by a 4 px grey line.
- 02The cursor clicks "Next" (110×38, bottom right) at 0.9, 1.7 and 2.5 s.
- 03On each click the current step becomes a blue circle with a white check and the next becomes the current one (blue circle, white number). Steps not reached are white with a grey rim.
- 04The blue line grows 127 px per click over 0.3 s with easeInOutCubic; after the third click all four are checked.
- 05Reset: the indicator fades out over 3.75–4.05 s and fades back in at step 1 over 4.05–4.3 s.
Prompt
Add a step indicator above the sign-up form with four steps: Details, Review, Payment, Done; completed steps show a check.