∞ forever components

Loaders

Seamless Mark Loader

A single-stroke figure-eight mark drawn faint, with an accent segment (and a dimmer echo half a cycle behind) running its closed loop with no visible reset. A mono label cycles 'loading', 'still here', 'almost', 'always here'.

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

Full-screen or first-paint loading where the logo and the loader are the same object; brand-led products with a monochrome base and one accent.

When not to

Inline or button-sized waits (use an arc spinner); interfaces that need a determinate percentage.

Working with an AI agent

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

Replace the three identical path d attributes with your own closed single-stroke mark (keep pathLength=1), change the loop length (2.4s on ml19-a / ml19-b) and the accent via --ml19-accent, and edit the words array the label cycles. 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

  • mark path (the shared d attribute on the three paths; keep pathLength=1)
  • segment lengths (stroke-dasharray .3 .7 live, .16 .84 echo) and loop speed (2.4s)
  • label words array and its 2400 ms interval
  • accent tokens (--ml19-accent, --ml19-accent-line)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • pathLength=1 + a full 1→0 dashoffset cycle — that is what makes the loop seamless
  • prefers-reduced-motion guard (static accent mark, no label cycle)
  • visibilitychange pause (animation-play-state on the three animated nodes + the label clock)
  • role=img + aria-label on the stage
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • The mark is a fixed closed path; an open path would show a start and an end at the wrap

loadermarkstrokefigure-eightinfinityloopaccentbrand

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.