∞ forever components

Progress & Status

Grout Progress

A glazed track inside a grout frame, divided into eight modules by grout channels, filling module by module in cobalt with a firm 500 ms grout-fill gesture; a mono readout ('5/8 · 62%'), a row of A–H bay coordinates that light with the fill, and a caption that reads queued, firing, module n, fired. Before each pass the track fires indeterminate.

csslight complexitysubtle 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

Batch or stage progress in operations, manufacturing, build and deploy surfaces where discrete steps matter more than a smooth bar.

When not to

Continuous percentages with no natural steps, or very narrow placements where eight modules drop under 34 px.

Working with an AI agent

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

Change SEG (segments — update the channel gradient's 8 too), the phase lengths FIRE=1500, STEP=600, HOLD=2000, the caption copy, and the pigment via --gp17-cobalt; aqua marks fired, poster marks firing. 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

  • segment count SEG (and the /8 in .gp17-channels)
  • phase lengths (FIRE, STEP, HOLD, RESET)
  • caption copy and the coordinate row
  • pigments (--gp17-cobalt, --gp17-aqua, --gp17-poster, --gp17-grout-deep)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • role=progressbar with aria-valuenow removed while firing
  • grout is the only structural border (3 px gap colour, no 1 px box borders)
  • prefers-reduced-motion guard (five of eight fired, still)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Archivo Black / Source Sans 3 / Recursive Mono fall back to Arial Black / system sans / ui-monospace
  • The pass is a demo loop — drive paint(n) from real events in a product

progresssegmentedgroutceramicazulejokilncobaltcoordinates

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.
  • Multi-TrackFour 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.