∞ forever components

Progress & Status

Vein Progress

A leaf-vein progress line on a pressed-fibre card: a midrib with nine side veins drawn faint as the skeleton, and a moss copy clipped to the value that wicks along it with capillary easing — slow, then rushing — while a growing tip pulses at the front. A display percentage, a readings count and an honest footer line.

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

Single-process progress in ecological, agricultural, health or craft products — rooting, curing, syncing readings — where a bar should feel grown rather than filled.

When not to

Multi-stage flows (use a stepped meter), or narrow columns under ~180 px where the veins compress.

Working with an AI agent

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

Change VEINS, the copy (label, readings total 22, footer), the grow / hold / ebb lengths GROW=6000, HOLD=1800, EBB=600, and the tone via --vp18-moss (water for information). 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

  • VEINS count and vein geometry (len, lean in skeleton())
  • phase lengths (GROW, HOLD, EBB) and the capillary curve cap()
  • copy (label, readings total, footer)
  • tone tokens (--vp18-moss, --vp18-water) and the leaf radius (28px 14px 28px 14px)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • role=progressbar + aria-valuenow on the SVG
  • the skeleton stays legible under the fill (unfilled midrib + veins always drawn)
  • prefers-reduced-motion guard (full vein drawn to the final value, tip still)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Bricolage Grotesque / Noto Sans fall back to the system sans
  • The value is a demo loop — call paint(p) with a real 0–1 value in a product

progressveinleafmidribbiophiliccapillaryorganictabular

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.