Progress Bar V03

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A four-step checkout (Cart, Shipping, Payment, Review) with numbered step dots joined by a progress line, a form panel for each step and an order summary. Back and Next buttons move between steps, update the step states and move focus to the new step heading. It works as the top of any multi-step form or checkout flow.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 284 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Completed steps show a check, the current step has a halo
• aria-current="step" plus a progressbar with "Step 2 of 4: Shipping" as its value text
• Focus moves to the new step heading on Back and Next
• Connecting line fills smoothly and respects reduced motion
• Order summary moves above the form on phones