∞ forever components

Progress & Status

Laurel Progress Ring

A hairline ring with an olive arc and a wreath of twenty-four tapered leaves that light in proportion to the value, a display figure with 'per cent' beneath in bronze mono, and a label with a records count. The figure climbs in uneven batches, rests complete, runs an indeterminate reconcile (all leaves lit, an em dash), then starts again.

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

One headline figure per view in archival, collection, conservation or editorial dashboards — catalogued, digitised, reviewed, complete.

When not to

Several parallel measures (use plain rules), tiny inline indicators, or anything that reads as a badge or crest.

Working with an AI agent

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

Set TOTAL and the label / caption copy, the leaf count N=24 and basal gap GAP=46, the step clock STEP=400 and the hold lengths, and the tone via --lr16-olive (verified) — Pompeii only for a shortfall. 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

  • TOTAL, label and caption copy
  • leaf count N and basal gap GAP; leaf length LEN and width WIDE
  • step clock (STEP) and the hold / reconcile lengths (1600 ms)
  • tone tokens (--lr16-olive, --lr16-bronze, --lr16-pompeii)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • role=progressbar with aria-valuenow removed while indeterminate
  • the laurel is a generic pair of mirrored leaf arcs — not a reproduction of any wreath, crest or emblem
  • prefers-reduced-motion guard (a still 62 per cent)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Marcellus renders only if installed — Georgia fallback
  • The demo figure is generated; feed a real value into paint() in a product

progressringlaurelclassicalleavespercentcataloguedisplay

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.