∞ 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 motionmobile-ready

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 →
1

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.