∞ forever components

Progress & Status

Traced Skeleton

A component card's cheap stage: a faint single stroke traces the frame, an accent dot pulses once per cycle and a mono status reads mounting, fetching source, painting — then the card resolves into a preview well with orbiting rings, a title and mono metadata, and the cycle repeats with the next item.

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 card grids, galleries and search results where a generic grey shimmer would feel off-brand; anywhere a frame should read as 'alive and coming' rather than empty.

When not to

Text-heavy content (use a line skeleton), or contexts needing a real progress figure.

Working with an AI agent

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

Edit the items array (title + metadata pairs), the phase lengths MOUNT=2600 and READY=2400, the status words in tick(), and replace the .ts13-preview SVG with your own resolved content; recolour via --ts13-accent. 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

  • items array and phase lengths (MOUNT, READY)
  • status words in tick()
  • resolved content (.ts13-content markup, .ts13-preview SVG)
  • trace speed (2.4s on .ts13-trace rect) and dot period
  • accent tokens (--ts13-accent, --ts13-accent-soft, --ts13-accent-line)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • aria-busy toggled with the state on the card
  • pathLength=1 on the trace rect + vector-effect:non-scaling-stroke (the stroke stays 1.2 px at any size)
  • prefers-reduced-motion guard (the resolved card, still)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • The skeleton phase is deliberately low-contrast (bones on surface) — the mount audit reads its first frame as near-flat while it is plainly a loading frame
  • The preview well's content is decorative; wire real data into .ts13-content in a product

skeletonplaceholderloadingstroketracecardmountmono

More Progress & Status components

  • Linear ProgressOlive-to-slate gradient bar fills left-to-right with a glowing leading edge, live percent readout, tick scale, and status dot; cycles fill → hold → reset…
  • Segmented StepperFour-step circular stepper auto-advances, filling connector segments with a plum-to-teal gradient and stamping SVG checkmarks as each step completes.
  • Upload ProgressCircular rust-toned ring fills to 100% with a leading dot and numeric readout; completes with a green checkmark draw-in. Auto-cycles.
  • Skeleton LoaderDark content-card skeleton with avatar, text rows, thumbnail, and pills swept by a staggered denim-blue diagonal shimmer and a breathing radial pulse.
  • Battery ChargeBattery shell fills olive-to-tan from 4%→100% over 6 s with a travelling sheen, pulsing bolt icon, and green glow ring at full charge.
  • Multi-TrackFour color-coded bars (ingest, transcode, index, publish) fill at staggered ease-out rates with a live N/4 complete counter; auto-resets after all finish.