Step Progress Indicator
Numbered steps joined by a track whose fill tweens to the active step, with completed nodes flipping their number into a drawn checkmark.
About This Component
A multi-step progress bar for checkouts, onboarding and long forms. The track fill tweens to the active step, the node you just left flips its number over into a checkmark that draws itself, and the node you arrive at pulses once so the eye follows the move.
Read the full effect overview
Completed steps stay clickable so someone can go back and fix an answer; steps ahead are disabled buttons, so nothing unreachable is focusable. Under 600px the whole thing stacks into a vertical list with the rail running down the side. One HTML file, one stylesheet, one script, GSAP core only, and three shipped looks switched by a data-variant attribute.
What's Included
- Track fill tweens to the active step in whichever axis the layout is using
- Completed nodes flip on rotationX from number to a stroke-drawn checkmark
- The active node pulses once on arrival
- Click any completed node to jump back; steps ahead are disabled
- Rail is measured from first node centre to last, so any node size works
- Compact vertical layout under 600px, remeasured on resize
- window.stepProgress.goTo / next / back for your own form code
- Three shipped variants: vault, paper, corporate
Perfect For
- Multi-step checkout and payment flows
- Onboarding and account setup wizards
- Long application or survey forms split into sections
- Upload, review and publish pipelines in dashboards
How It Works
A measured rail, not a padded one
The rail is positioned from the centre of the first node to the centre of the last with getBoundingClientRect, so it never pokes past the end nodes whatever their size, gap or label width. It is remeasured on load, after web fonts land, on resize and whenever the variant changes.
One fill, two axes
The fill is a child of the rail. Horizontally GSAP tweens its width to a percentage of the step index; below 600px the same call tweens its height instead, and the unused axis is pinned to 100 percent so rotating the layout never leaves a stale dimension behind.
Flipping a number into a check
The number and the checkmark sit stacked inside the node with backface-visibility hidden and a perspective on the parent. Completing a step rotates the number out on rotationX, rotates the check in, and tweens the check path's strokeDashoffset from its measured length to zero so the tick draws. Jumping back plays the same flip in reverse and clears the inline colours GSAP set.
Reachable means focusable
Every node is a real button. Steps ahead of the current one carry the disabled attribute plus pointer-events none, so they are skipped by keyboard navigation and cannot swallow a click; completed steps stay live and jump the flow back. The active node carries aria-current step and an aria-live line announces the position on every change.