Stepper progress
Airbnb-style progress bars with animated fill transitions for multi-step flows.
Interactive
Click previous/next to see the animated bar transitions. Each bar fills when its step is reached.
States
Step 1 of 4
Your progress: step 1 out of 4.
Step 2 of 4
Your progress: step 2 out of 4.
Step 3 of 4
Your progress: step 3 out of 4.
Step 4 of 4
Your progress: step 4 out of 4.
Static snapshots of each step. Bars fill left-to-right as progress increases.
Step counts
2 steps
Your progress: step 1 out of 2.
3 steps
Your progress: step 2 out of 3.
6 steps
Your progress: step 3 out of 6.
The bars adapt to any number of steps, dividing the available width equally.