∞ forever components

Progress & Status

Skeleton Grid Cascade

A three-by-three wall of component tiles loading in a diagonal cascade: each frame is traced by a faint stroke with a pulsing accent dot, then resolves one by one into an abstract preview (rings, bars, a dot field, a mark, a chart line) with a mono index; the wave unmounts the same way, reshuffles and repeats.

csslight complexitymoderate 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

Gallery, canvas and search-result loading states; onboarding screens that need to suggest 'many things arriving' without real content yet.

When not to

Single-item loading (use Traced Skeleton), or layouts where nine equal cells do not fit the frame.

Working with an AI agent

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

Change the grid size (repeat(3,1fr) + the order array + the loop of 9), the art vocabulary (the art array of inline SVG fragments), the cascade timing STEP=260 / HOLD=2200 / GAP=900, and the accent via --sg14-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

  • grid size and the diagonal order array
  • art array (inline SVG fragments in a 100×100 box; .a strokes and .af fills take the accent)
  • cascade timing (STEP, HOLD, GAP)
  • trace speed (2.4s) and per-column animation-delay offsets
  • accent tokens (--sg14-accent, --sg14-accent-line)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • cells and previews are generated from arrays (keeps the DOM ~70 nodes)
  • pathLength=1 + vector-effect:non-scaling-stroke on the trace rects
  • prefers-reduced-motion guard (the resolved wall, still)
  • visibilitychange pause
  • role=img + aria-label on the grid
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Nine cells at 180 px are small; the previews are abstract marks by design, not thumbnails

skeletongridcascadeloadingstroketracewalltilesabstract

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.