Component theme

Progress & Status

10 components, each a single self-contained HTML file — no frameworks, no build step. Preview them here, or see them live on the canvas.

• 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.
• 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.
• Install PhasesMarching diamond packets stream along a gated conduit through Download, Verify, Install, Done phases; a scan cursor and label row track progress.
• Status GaugeSemicircular gauge with a denim-blue needle that overshoots to settle on cycling values; arc fill and status label update in sync.
• ChecklistFour rows tick off in sequence — SVG rings draw, checkmarks snap in — while a progress bar eases to 100% and a "Done" stamp pops. Loops automatically.