∞ forever components

Loaders

Particle Orbit

18 glowing iris, cyan, and magenta particles orbit a white core on wobbling elliptical paths; trailing fill creates a comet-like motion blur effect.

canvasmedium 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

Loading screens, async operation indicators, dark-mode splash screens needing ambient energy.

When not to

Light backgrounds (hardcoded dark fill). Contexts where spinner must stop on completion — no external stop API exposed.

Working with an AI agent

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

Change particle colors to gold and teal by setting COLORS=['#f59e0b','#14b8a6','#fb7185'], reduce particle count to N=12, and slow orbit speed by changing base speed to 0.008. 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

  • particle colors (COLORS array)
  • particle count (N=18)
  • orbit speed (0.012 + step)
  • ellipse squish ratio (r*0.62)
  • wobble amplitude (base*0.05)
  • core dot size (base*0.04)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • pre-rendered sprite cache (makeSprite) — critical for perf
  • DPR-aware canvas sizing
  • visibilitychange pause/play
  • reduced-motion static fallback
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS and canvas fill — must edit both to change
  • No external API to stop/start the spinner programmatically from outside the IIFE
  • Reduced-motion renders one static frame only — no accessible text alternative

loaderspinnerparticlesorbitcanvasglowellipse

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.
  • 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.
  • Conic ProgressA circular conic-gradient ring fills from 0–100% with a lime arc and a blurred gold glow layer; a live numeric counter updates in sync.