OneTaskBy Tim King · Updated
Form Progress Bar Generator
Numbered Steps, Segmented Bars and Checkout Progress Indicators
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Form Progress Bar works
This form progress bar builder shows the steps of a long form. People finish long forms when they can see the end. Choose numbered steps, segmented bars or a single percentage bar, type your step labels, set which step is current and copy a progress indicator that reads correctly to screen readers as well as looking right.
Form progress bar: showing people where they are
Three patterns cover almost every form. Numbered steps are circles joined by a line, with completed steps showing a tick and the current step highlighted — the classic checkout stepper. Segmented bars give each step its own short bar that fills as you progress, which works well at narrow widths where circles and labels would collide. A continuous bar shows a percentage and a "Step 2 of 4" caption, best for forms where step names are not meaningful.
Markup for steps. Both step styles use an ordered list, because the steps are a sequence. The
current item gets aria-current="step", which screen readers announce, and the list carries an
aria-label of "Step 2 of 4" so the overall position is available without reading each item.
Completed steps have class done, the current one active; the CSS colours from those two
classes alone, so your script only has to move them.
CSS counters do the numbering. The circle numbers come from counter(step) in ::before, so
you never hard-code a digit. Completed circles swap the counter for a tick character. Add or
remove list items and the numbers stay correct.
The connector line. In the numbered style each item except the last draws a line from its
centre to the next item with ::after, positioned absolutely at half the circle height. Done
items colour their line with the accent, so the line "fills" up to the current step. Because
each item is flex: 1, the lines stay equal however wide the container is.
The continuous bar. The fill width comes from a --progress custom property on the wrapper,
so updating progress is one line: el.style.setProperty('--progress', '75%'). The wrapper has
role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax, which is what
assistive technology expects for a progress control.
Sizing. Thickness controls the bar height, and in the numbered style the circle diameter is four times the thickness so the two styles stay proportionate when you switch between them.
FAQ
Should I use the HTML progress element instead?
You can for the continuous bar — <progress value="2" max="4"> is semantically ideal. It is
harder to style consistently across browsers, though, which is why the generator uses a div with
role="progressbar" and the matching ARIA values. Both are accessible; the div is easier to skin.
How do I update the indicator from JavaScript?
For the step styles, move the done and active classes: every item before the current index
gets done, the current gets active and aria-current="step", the rest get nothing. For the
continuous bar, set --progress and aria-valuenow on the wrapper.
Why do step labels disappear on small screens?
They do not by default, but four labels across 320px will wrap awkwardly. Either hide the labels below a breakpoint with a media query and rely on the numbers, or switch to the segmented style, which puts labels under each bar and tolerates wrapping better.
What does aria-current="step" do?
It tells assistive technology which item in a set represents the current step, so a screen
reader announces "Delivery, current step" instead of just "Delivery". It is the correct value for
steppers; aria-current="page" is for navigation menus.
Can the completed steps be clickable?
Yes, and users expect it in checkouts. Wrap the label of each done item in a <button> or a
link back to that step. Leave upcoming steps as plain text, since jumping ahead skips validation.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Multi-Step Form Builder
Wizard forms with step indicators, per-step validation and Back/Next buttons.
CSS Divider Generator
Slanted, curved, zigzag and wave section dividers in pure CSS.
Dual Range Slider
Two-thumb min/max slider for price filters, no library needed.
Password Strength Meter
Colour-coded password strength bar with a small scoring script.
Range Slider Builder
Custom-styled range input with filled track and live value.