∞ forever components

Loaders

Skeleton Shimmer

Dark content-placeholder card with avatar circle and staggered text bars swept by a looping gold-to-tan shimmer gradient. Pure CSS, no JS logic.

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

Loading states for social cards, profile pages, or any content feed where real data is pending. Drop in as a direct replacement for a loaded card layout.

When not to

Light-background UIs — background is hardcoded dark navy. Avoid when reduced-motion users need a fully static placeholder; animation still runs one iteration before stopping.

Working with an AI agent

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

Change shimmer colors from marigold/tan to amber/rose by replacing rgba(232,171,48,.22) with rgba(251,191,36,.22) and rgba(192,156,89,.22) with rgba(232,180,180,.22), and slow the sweep to 2.4s. 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

  • shimmer colors (rgba values in ::after gradient)
  • sweep duration (1.8s in animation)
  • bone background color (--bg-surface)
  • stagger delays (.15s, .2s, .35s)
  • card width (min(70vmin,240px))
  • block width modifiers (80%, 95%, 60%)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange pause via .paused class toggle
  • prefers-reduced-motion guard
  • IIFE wrapper
  • c05- namespace prefix on all classes
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Pseudo-element play-state cannot be set via inline style — pause requires the .paused class hack; don't remove the extra style block at end of body
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default

skeletonshimmerloaderplaceholderui-patterncardcss-animation

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.
  • 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.
  • 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.