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

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.