∞ forever components

Progress & Status

Status Gauge

Semicircular gauge with a denim-blue needle that overshoots to settle on cycling values; arc fill and status label update in sync.

svgmedium complexitymoderate 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

Dashboard widgets, system monitoring UIs, or any metric that cycles through discrete target values with satisfying physical needle behavior.

When not to

Contexts needing user-controlled input — the gauge auto-cycles only. Also avoid on light backgrounds; the dark palette is hardcoded.

Working with an AI agent

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

Change the targets array to [0.55, 0.80, 0.30] for a tighter range, set --pg11-accent to #00e5ff for a cyan theme, and rename the label from 'System Load' to 'CPU Usage'. 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

  • targets array (value sequence)
  • DUR/HOLD (animation timing)
  • --pg11-accent / --pg11-accent2 (color scheme)
  • status thresholds (40/75/92 breakpoints)
  • label text ('System Load')
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (static paint fallback)
  • visibilitychange pause/resume
  • aria-valuenow update on pg11-bar
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Auto-cycles only; no external API to drive real data without wiring a setInterval replacement

gaugeprogressneedlearcstatusdashboardmonospace

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.