Segmented Progress — Multi-Step Progress HTML CSS JS

A segmented progress bar breaks a single bar into discrete chunks — one per step or task — that fill as the user advances, so progress through a known, finite sequence reads more clearly than a continuous bar. It's the indicator for checkouts, onboarding, multi-part uploads, and wizards. This snippet builds it in plain HTML, CSS, and vanilla JavaScript, with per-segment fills, step labels that mark active and cleared states, a live percentage, and back/next controls — no library.

Discrete segments, not a continuous bar

The bar is a flex row of equal segments, one per step, with a small gap between them. Each segment fills via a scaleX transform on a pseudo-element (transform-origin: left), so completing a step animates that segment growing left-to-right. Segments are the right choice over a single continuous bar when the total is a small, countable number of steps: the viewer can see *which* steps are done and *how many remain* at a glance, which a smooth bar can't convey.

Active vs. cleared vs. upcoming

The component tracks one current index and derives every visual from it: segments before the current step are filled, step labels before it are marked "cleared" (green), the current label is "active" (accent), and upcoming labels stay muted. Encoding three distinct states — done, here, and not-yet — is what makes a step indicator genuinely informative rather than just decorative; the user always knows exactly where they are in the flow.

Single source of truth

Everything — segment fills, label states, the percentage, the heading, and the disabled state of the buttons — is computed in one render() from the current index. There's no separate bookkeeping to drift out of sync, so advancing or retreating a step updates the whole component consistently. The percentage is derived from the step position, and Back disables at the start while Next becomes "Finish" on the last step and disables at the end.

Smooth, transform-based fills

Filling uses a CSS transition on the transform, so each segment glides as you progress rather than snapping — and because it animates a transform (not width or a layout property), it's GPU-friendly and jank-free. Reversing a step un-fills the relevant segment with the same smooth animation.

Data-driven and drop-in

The steps come from a STEPS array, so changing the flow is editing one list — the bar, labels, percentage, and controls all adapt to any number of steps. Wire current to your real flow state (validated each step) and it becomes the progress header for any wizard or multi-step process. It's a clear reference for segmented, state-aware progress indication. The percentage label is worth a second look too: it's computed as current / (STEPS.length - 1), not current / STEPS.length, so it reaches a clean 100% on the final step instead of stalling at 80% for a 5-step flow — a common off-by-one that makes a progress indicator feel like it never quite finishes.