∞ forever components

Loaders

Heartbeat Status

A status card with three service rows, each carrying a barely-there accent heartbeat dot, a mono uptime figure and a 'live' state. Every few seconds one row hands its dot over to a short spinning arc and reads 'syncing', then settles back; the footer counts seconds since the last check.

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

Status pages, sidebars and settings panels that need to say 'still here' quietly; dashboards where a full spinner would be too loud.

When not to

Contexts that need real health data wired in (this is a presentation pattern), or a single inline indicator (use the dot alone).

Working with an AI agent

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

Edit the rows array (name + uptime pairs), the sync cadence (SYNC_EVERY=5500, SYNC_FOR=1800) and the footer text; recolour the syncing state via --hb20-warn and the pulse via --hb20-accent / --hb20-accent-line. 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

  • rows array (service names + uptime strings)
  • sync cadence (SYNC_EVERY, SYNC_FOR) and the heartbeat period (2.8s)
  • footer copy (region label) and the 'ago' wording in tick()
  • accent / warning tokens (--hb20-accent, --hb20-accent-line, --hb20-warn)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • rows are generated from the data array (keeps the file small)
  • prefers-reduced-motion guard (three live rows, no pulse, no sync cycle)
  • visibilitychange pause (clock + .is-paused animation-play-state)
  • role=img + aria-label on the card
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Uptime figures and the 'ago' clock are demo data, not wired to a monitor
  • Seizure-safe by design: the pulse is a 2.8 s breath and the arc a 0.9 s turn — keep both slow

loaderstatusheartbeatpulseuptimespinnerlivemonitormono

More Loaders components

  • Morphing BlobAurora-gradient blob slowly morphs border-radius and rotates, with an inset dark ghost layer counter-rotating. Soft glow on dark backdrop.
  • DNA HelixTwo columns of 10 glowing dots swing left-right in opposite phases, tracing a rotating DNA double helix. Cycling status messages fade in below.
  • Skeleton ShimmerDark content-placeholder card with avatar circle and staggered text bars swept by a looping gold-to-tan shimmer gradient. Pure CSS, no JS logic.
  • Particle Orbit18 glowing iris, cyan, and magenta particles orbit a white core on wobbling elliptical paths; trailing fill creates a comet-like motion blur effect.
  • Concentric PulseFour concentric rings ripple outward in staggered teal, tan, and slate waves from a beating gradient core dot on a dark background.
  • Equalizer BarsSeven pill-shaped vermillion-to-tan gradient bars bounce at staggered offsets, mimicking an audio equalizer. Pure CSS scaleY animation.