Progress & Status

Atmospheric Skeleton

A card of sunk placeholder blocks with a warm and a cool haze passing across each on a 12 s clock and a 3.2 s breathe; after a few seconds the blocks resolve into a layered landscape study — far, mid and near bands with no strokes between them, a low sun, a light display title and field notes — then the next study mounts.

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 image, card and gallery content in painterly or editorial products; anywhere a grey shimmer would break the atmosphere.

When not to

Text-dense lists (use a line skeleton) or interfaces that need a determinate figure.

Working with an AI agent

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

Edit the items array (kicker, title, notes), the phase lengths LOAD=3400 and SHOW=3000, the haze tokens --as19-warm / --as19-cool and the band colours --as19-far / -mid / -near. 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 (LOAD, SHOW)
haze pass (12s) and breathe (3.2s) timings
band colours (--as19-far, --as19-mid, --as19-near) and the sun
card radius (16px) and block radius (6px)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper
role=status + aria-busy toggled with the state; the label names the resolved study
texture recipe: ground, wash, break — no fourth layer, no blur
prefers-reduced-motion guard (the resolved study, complete and still)
visibilitychange pause (.is-paused freezes every animation)
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Ysabeau / Source Sans 3 fall back to Georgia and the system sans
The resolved study is decorative sample content; wire real data into .as19-content in a product

skeletonplaceholderloadinghazewashplein-airlandscapecard

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.