Progress steps bar for websites (HTML and CSS stepper)

Progress steps bar for websites (HTML and CSS stepper): what it is for

Generate the bar that shows which step someone is on: cart, shipping, payment and confirmation; details, address and review; order received, being prepared and on its way. Write one step per line and choose the current one, the direction and the colors. Completed steps get a check mark and the line between them follows the progress.

The code uses an ordered list, with aria-current="step" on the current step and hidden completed text for screen readers. In horizontal mode, on narrow screens, the bar shows only the numbers and the name of the current step. It also comes with an irPara(n) function to change steps with JavaScript.

How to use

1. Write the steps, one per line.
2. Choose the current step, direction and colors.
3. Copy the code or download the HTML.

When to use it

• Online store checkout.
• Multi-part sign-up forms.
• Order tracking.

Frequently asked questions

Is the steps bar accessible?

Yes. It is an ordered list (ol), so screen readers announce the number of steps and the position of each one. The current step has aria-current="step", and completed ones have hidden text that says completed.

Does it work on phones?

In horizontal mode, on narrow screens the bar shows only the numbers and the name of the current step, so the text does not get cramped. Vertical mode works the same on any screen and is good for order tracking.

How do I change the current step with JavaScript?

Swap the classes: previous steps get feito, the current one gets atual and aria-current="step", and the next ones have no class. The generated code includes an irPara(n) function that does this.

Is it really free?

Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.

Similar tools