webdevpuneet.com

Related Snippets

73 in Loaders category
55–60 of 60

Skeleton Card Grid

Segmented Progress

Typing Indicator

Circular Countdown

Top Loading Bar

Image Blur-Up Loader

Segmented Progress — Multi-Step Progress HTML CSS JS

Segmented Progress · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsLoading States

Copy & paste

Source Code

<div class="sg-card">
  <div class="sg-top"><span class="sg-label" id="sgLabel"></span><span class="sg-pct" id="sgPct"></span></div>
  <div class="sg-bar" id="sgBar"></div>
  <div class="sg-steps" id="sgSteps"></div>
  <div class="sg-controls">
    <button type="button" class="sg-btn sg-ghost" id="sgPrev">Back</button>
    <button type="button" class="sg-btn" id="sgNext">Next step</button>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Per-step segments
One fillable segment per step shows which steps are done and how many remain.
Transform-based fills
Segments fill via a GPU-friendly scaleX transition rather than animating width.
Three label states
Cleared (green), active (accent), and upcoming (muted) labels show exactly where you are.
Live percentage
A percentage derived from the step position updates as you advance.
Single source of truth
Everything derives from one current index, so nothing drifts out of sync.
Smart controls
Back disables at the start; Next becomes Finish on the last step and disables at the end.
Reversible
Going back un-fills segments with the same smooth animation.
Data-driven & no library
Built from a STEPS array in plain HTML/CSS/JS — zero dependencies.

About this UI Snippet

Segmented Progress — One Fillable Segment Per Step with Active and Cleared States

Screenshot of the Segmented Progress snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA segmented progress bar renders for a 5-step checkout with Back/Next controls.
  2. 2
    Advance stepsClick Next to fill the next segment, mark the step cleared, and update the percentage.
  3. 3
    Go backClick Back to retreat a step; the segment un-fills smoothly.
  4. 4
    Change the stepsEdit the STEPS array — the bar, labels, and controls adapt to any number.
  5. 5
    Wire to your flowDrive the current index from your real wizard state, advancing only after each step validates.
  6. 6
    Restyle itChange the fill gradient, segment height, or label colours to match your design.

Real-world uses

Common Use Cases

Checkout and signup flows
Show progress from cart to payment to confirmation, with one fillable segment per step and a multi-step form below.
Onboarding wizards
Indicate steps remaining in setup alongside an onboarding tour, with cleared, active and upcoming labels in distinct colours.
Multi-part uploads
Show chunk or file progress as discrete segments next to an upload progress bar for the individual transfer.
Surveys and quizzes
Track progress through a fixed set of questions, with a live percentage derived from the current step position.
Wizard variants
Compare with a progress wizard or step progress when steps need numbers or icons, since fills use GPU-friendly scaleX.
Related: Suspense-Style Data Fetch Fallback
See the Suspense-Style Data Fetch Fallback for a related loaders pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Use segments when the total is a small, countable number of discrete steps — a checkout, a wizard, a few upload chunks. Segments show which steps are complete and how many remain, which a smooth bar can't convey. Use a continuous bar for fine-grained or unknown-length progress (a file download percentage), where individual steps aren't meaningful.

Animating a transform like scaleX is GPU-accelerated and doesn't trigger layout recalculation, so the fill is smooth and jank-free. Animating width forces the browser to reflow on every frame. The segment uses transform-origin: left so the scale grows from the left edge, giving the natural left-to-right fill while staying on the fast path.

A single current index represents the step in progress. render() derives everything from it: segments with index < current are filled, labels before it are marked cleared, the label at current is active, and the rest are muted. Because one number drives all the visuals, advancing or retreating stays perfectly consistent — there's no separate per-segment state to keep in sync.

Drive the current index from your form's step state, and only increment it after the current step passes validation. Call render() (or, in a framework, update the state) whenever the step changes. The bar is a presentational header — keep your field logic separate and let this reflect the validated step position.

Hold the current step in state and derive the segment fills, label classes, and percentage from it in the render. In React use useState; in Vue a ref with computed classes; in Angular a component property with class bindings. The CSS transitions handle the animation, so only the current index and derived classes move into the framework.