∞ forever components

Neumorphism

Ring Gauge

SVG ring gauge fills with a sage-to-slate gradient arc over 4 seconds, counting a numeric percentage; resets and loops continuously.

svglight 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, loading indicators, or metric displays on dark neumorphic UIs needing ambient animated progress.

When not to

Light backgrounds (hardcoded dark charcoal). Contexts needing user-driven real data — wire setVal() externally and remove the auto-loop.

Working with an AI agent

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

Change the label from 'LOAD' to 'CPU', set gradient stops to #ff6b6b and #ff9f43, and slow the fill cycle to 6000ms by updating DURATION=6000. 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

  • gradient colors (stop-color #5A8C73 / #4B5560)
  • DURATION constant (4000ms)
  • INTERVAL step rate (80ms)
  • ring stroke-width (10)
  • label text (.neu-unit content 'LOAD')
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (sets static 65% fallback)
  • visibilitychange pause/play
  • 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-loops by default; remove setInterval and call setVal() with live data for production use

gaugeringsvgneumorphismprogressloopdata-viz

More Neumorphism components

  • Toggle SwitchesThree neumorphic toggle switches auto-cycle on/off with a smooth ochre-accented thumb slide and inset shadow track.
  • Progress TrackNeumorphic inset progress track fills 0→100% via a slate-to-olive gradient fill, cycling with a percentage counter. Resets and loops automatically.
  • Volume KnobA neumorphic volume knob with 24 tick marks auto-rotates back and forth over 6 seconds, its gradient marker sweeping the full 360 degrees.
  • Stat CardsFour neumorphic stat cards (temp, humidity, power, signal) cycle through live-updating values one at a time, each card pulsing its shadow on update.