∞ forever components

Progress & Status

Multi-Track

Four color-coded bars (ingest, transcode, index, publish) fill at staggered ease-out rates with a live N/4 complete counter; auto-resets after all finish.

cssmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Pipeline dashboards, multi-step upload flows, build status displays, any context showing parallel async tasks completing at different rates.

When not to

Single-task progress scenarios or production use — the auto-cycle loop must be replaced with real data binding before shipping.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Add a fifth track named 'DEPLOY' with color var(--pg08-c1), rate 0.090, and t0 of 0.70 to TRACKS array, then update the '/4 complete' label to '/5 complete'. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • track names and colors (TRACKS[i].n / .c)
  • fill rates per track (TRACKS[i].rate)
  • start stagger offsets (TRACKS[i].t0)
  • hold duration after completion (HOLD = 1.6)
  • bar height (clamp(7px,2vmin,11px))
  • tick-mark divisions (25% repeating-linear-gradient)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • visibilitychange pause/resume guard
  • prefers-reduced-motion static snapshot branch
  • aria-progressbar roles and aria-valuenow updates
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Auto-cycles indefinitely — replace rAF loop with external data binding for real production use
  • Tick marks hardcoded at 25% intervals; changing track count does not update them automatically

progressmulti-trackstatuspipelinedashboardstaggerloop

More Progress & Status components

  • Linear ProgressOlive-to-slate gradient bar fills left-to-right with a glowing leading edge, live percent readout, tick scale, and status dot; cycles fill → hold → reset…
  • Segmented StepperFour-step circular stepper auto-advances, filling connector segments with a plum-to-teal gradient and stamping SVG checkmarks as each step completes.
  • Upload ProgressCircular rust-toned ring fills to 100% with a leading dot and numeric readout; completes with a green checkmark draw-in. Auto-cycles.
  • Skeleton LoaderDark content-card skeleton with avatar, text rows, thumbnail, and pills swept by a staggered denim-blue diagonal shimmer and a breathing radial pulse.
  • Battery ChargeBattery shell fills olive-to-tan from 4%→100% over 6 s with a travelling sheen, pulsing bolt icon, and green glow ring at full charge.
  • BufferingVideo-stream buffering bar: a sage-green fill chases a buffered-ahead band with a sweeping sheen, 8 segment dots, live percent counter, and ETA readout.