∞ 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 motionmobile-ready

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 →
1

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.