webdevpuneet.com

Related Snippets

73 in Loaders category
8–13 of 60

Stage Progress Fill Checklist

Gradient Mesh Loading Screen

Streaming Text Skeleton Reveal

Realistic Network Progress Bar

AI Token Flicker Typing Loader

Skeleton Shape Morph Reveal

Stage Progress Fill Checklist — Per-Step Progress Bar Loader JS

Stage Progress Fill Checklist · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsCSS AnimationLoading States

Copy & paste

Source Code

<div class="pf-card">
  <div class="pf-head">
    <h2 class="pf-title">Processing your video</h2>
    <p class="pf-sub" id="pfSub">This can take a minute…</p>
  </div>
  <ul class="pf-list" id="pfList">
    <li class="pf-item" data-label="Uploading file"><span class="pf-icon"></span><div class="pf-body"><span class="pf-text">Uploading file</span><div class="pf-track"><div class="pf-fill"></div></div></div></li>
    <li class="pf-item" data-label="Transcoding"><span class="pf-icon"></span><div class="pf-body"><span class="pf-text">Transcoding</span><div class="pf-track"><div class="pf-fill"></div></div></div></li>
    <li class="pf-item" data-label="Generating thumbnails"><span class="pf-icon"></span><div class="pf-body"><span class="pf-text">Generating thumbnails</span><div class="pf-track"><div class="pf-fill"></div></div></div></li>
    <li class="pf-item" data-label="Publishing"><span class="pf-icon"></span><div class="pf-body"><span class="pf-text">Publishing</span><div class="pf-track"><div class="pf-fill"></div></div></div></li>
  </ul>
  <button class="pf-replay" id="pfReplay" type="button">↻ Replay</button>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), 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

Each active stage gets its own real 0-100% progress fill, not an instant spinner-to-check flip
Strictly sequential execution — only one stage is ever active at a time
Per-stage randomized duration reflects that real stages rarely take equal time
Fill bar only visible on the currently active item, keeping the finished list clean
Spinner and checkmark icon states built entirely with CSS, no icon library
Dimmed idle state for stages not yet reached
Running subtitle mirrors the active stage label and the completion state
Replayable via a dedicated button with fresh randomized timing on each run
Data-driven STAGES array — add, remove, or retime stages freely
Zero dependencies — vanilla DOM and CSS only

About this UI Snippet

Stage Progress Fill Checklist \u2014 A Multi-Stage Loader Where Each Step Gets Its Own Real Fill Bar

Screenshot of the Stage Progress Fill Checklist snippet rendered live

A typical multi-stage checklist loader shows each item flipping instantly from a spinner to a checkmark, which communicates which stage is current but nothing about how far into that stage you actually are. This snippet adds a real per-stage progress bar: the currently active item expands to show its own 0% \u2192 100% fill, driven by a real elapsed-time calculation against that stage's expected duration, and only becomes a checkmark once its own bar genuinely reaches 100%.

One real fill bar per active stage

Each .pf-item has a hidden .pf-track/.pf-fill pair that only becomes visible (display: block) while that item carries the .pf-active class. runStage(index) starts a setInterval that computes (Date.now() - start) / duration roughly every 45ms and sets fillEl.style.width directly to that percentage \u2014 a genuine incremental progress read for the currently running stage, not a single CSS transition jumping straight from 0 to 100.

Strict sequencing with per-stage randomized duration

runStage() only calls itself for the next stage after the current stage's fill interval reports 100% completion, guaranteeing stages run one at a time in order. Each stage's duration is randomized between its own minMs and maxMs \u2014 Transcoding is deliberately given a longer range than Publishing, since real video processing pipelines genuinely spend more time on some stages than others, and a viewer watching the transcoding bar move slower than the publishing bar reads as more honest than four identically-paced steps.

Dimmed, idle, and complete states

Items that haven't started yet sit at reduced opacity with a plain empty ring icon and no visible fill track. The active item brightens, shows a spinning-border icon, and reveals its fill bar. A completed item shows a checkmark built from a rotated CSS border pseudo-element, its label dims to a muted tone, and its fill track hides again \u2014 so the finished list reads cleanly without four permanently-visible full progress bars cluttering the view.

A running subtitle

The subtitle line above the list mirrors the active stage's label (Transcoding…) and switches to a completion message once every stage has genuinely finished, giving a second, textual confirmation of the same real state the bars and icons are showing.

Customizing it

Replace each stage's simulated duration range with your real backend's actual processing time estimates, or better, drive fillEl.style.width directly from real percentage-complete events reported by your job queue for that specific stage, skipping the internal setInterval entirely. Pair it with an agent task segment tracker for a compact horizontal alternative to this vertical checklist layout.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe first stage ("Uploading file") activates immediately and its fill bar begins filling.
  2. 2
    Watch each stage fillThe active item\u2019s own progress bar climbs from 0% to 100% before it becomes a checkmark.
  3. 3
    Watch stages advance in orderOnly one stage is ever active at a time; the next begins the instant the previous completes.
  4. 4
    Reach completionThe subtitle switches to a done message and the replay button re-enables.
  5. 5
    Click "Replay"Every item resets and the sequence runs again with fresh randomized durations.
  6. 6
    Edit the STAGES arrayRename stages and adjust their minMs/maxMs duration ranges to match your real pipeline.

Real-world uses

Common Use Cases

Video/media processing pipelines
The primary use case — show real per-stage progress for upload, transcode, and publish steps.
Multi-step deployment or build progress
Give each build phase its own honest fill instead of one ambiguous spinner per step.
Document processing and export tools
Narrate "Extracting… Formatting… Generating PDF…" with real per-stage progress.
Teaching sequential per-stage progress patterns
A clear reference for combining a checklist with individually-tracked fill bars.
Account and workspace provisioning screens
Show meaningful per-step progress instead of a single vague loading message.
Related: Multi-Stage Loading Checklist
See the Multi-Stage Loading Checklist for the simpler instant-checkmark version of this pattern.

Got questions?

Frequently Asked Questions

A plain checklist swaps a spinner icon for a checkmark the moment a stage starts and finishes, with no sense of how far along that stage actually is. This component adds a real per-stage fill bar, visible only on the currently active item, that climbs from 0% to 100% based on a genuine elapsed-time calculation before the checkmark appears.

No. runStage(index) only calls itself for the next stage inside the current stage\u2019s own completion branch, once its fill interval reports 100%. Stages always run strictly one at a time, in order, never overlapping.

Each STAGES entry defines its own minMs and maxMs, and Transcoding is given a longer range than Publishing because real video pipelines genuinely spend more time on some stages than others. Giving every stage an identical duration would read as obviously fake once a viewer compares a "quick" step to a "slow" one.

Replace the internal setInterval-driven fraction calculation with real percentage updates pushed from your job queue or processing backend (e.g. over SSE or polling) \u2014 call fillEl.style.width = realPercent + "%" directly whenever a new value arrives for the currently active stage, and call the same completion branch (removing pf-active, adding pf-complete, calling runStage for the next index) once that stage reports 100%.

The .pf-track element is only shown via display: block while its parent .pf-item carries the pf-active class; that class is removed the instant the stage completes. This keeps the finished checklist visually clean, since a fully-filled bar sitting next to a checkmark for every completed item would be redundant and cluttered.

Yes. Keep an activeIndex and a per-stage percentage in state, advancing activeIndex only once the active stage\u2019s percentage state reaches 100 inside an effect-driven interval or real progress event handler. Render each item\u2019s icon, label, and conditional fill bar from that state; the CSS classes and transitions carry over directly.