∞ forever components

Loaders

Infinity Loop

Two glowing traces (pink and cyan) chase each other around a lemniscate path using stroke-dashoffset animation; a near-invisible track marks the full path beneath.

svglight 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

Elegant loading indicators for dark-theme apps. AI/processing metaphors, infinite-process indicators, anywhere the infinity symbol resonates with the product.

When not to

Light backgrounds (hardcoded dark fill). Very small sizes — trace detail degrades below ~80px width.

Working with an AI agent

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

Make single-color by removing the .c17-trace--cyan path element and its CSS rule. Adjust trace length with the first dasharray value (22 = short, 50 = half-path). Speed up by reducing 2s on c17-trace-loop. Thicken by increasing stroke-width from 5 to 7. 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

  • trace colors (#ff5ca8 and #22d3ee on .c17-trace and .c17-trace--cyan)
  • trace length (22 — first value in stroke-dasharray; max 100 due to pathLength)
  • animation speed (2s on c17-trace-loop)
  • stroke width (5 on .c17-trace)
  • track visibility (0.05 rgba — increase to show the full path)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • pathLength='100' on all path elements — makes dasharray values path-percentage not pixels; removing it breaks all animation math
  • animation-delay: -1s on .c17-trace--cyan — creates the chase offset at exactly half-cycle
  • degenerate close segment 'C 35 20, 35 40, 35 40' at path end — needed for smooth loop with no jump
  • visibilitychange pause handler
  • c17- namespace on all classes
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • pathLength='100' is intentional and must not be changed — see preserveElements
  • The lemniscate path closes with a degenerate cubic segment; editing the path requires re-testing loop continuity

infinitylooplemniscatefigure-eightstrokedash-offsetsvgminimalmathelegant

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.