Progress & Status

Skeleton Loader

Dark content-card skeleton with avatar, text rows, thumbnail, and pills swept by a staggered denim-blue diagonal shimmer and a breathing radial pulse.

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

Content loading states for cards, feeds, or dashboards where layout should be hinted before data arrives.

When not to

Contexts requiring actual progress indication (use a progress bar); light-color backgrounds without restyling CSS vars.

Working with an AI agent

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

Change accent to taupe by setting --pg05-accent to #857C74 and updating the shimmer highlight rgba values from 220,229,234 to 133,124,116. 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

accent color (--pg05-accent)
shimmer speed (animation-duration: 1.7s)
shimmer delay offsets (.pg05-d1 through .pg05-d6)
card background gradient
bone block colors (--pg05-bone, --pg05-bone2)
breathe pulse cycle (3.4s)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper with visibilitychange pause
prefers-reduced-motion guard
role=progressbar + aria-busy semantic
will-change:transform on .pg05-sheen
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
Shimmer is decorative; no real loading state wired to data

skeletonshimmerloadingplaceholdercardui-patternprogress

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.
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.
BufferingVideo-stream buffering bar: a sage-green fill chases a buffered-ahead band with a sweeping sheen, 8 segment dots, live percent counter, and ETA readout.