Component theme

Progress & Status

19 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.
• Traced SkeletonA 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…
• Skeleton Grid CascadeA 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…
• Seamless Progress LineThree progress idioms in one handoff card: a determinate copy line filling to a tabular percentage, an indeterminate stream where a lit accent segment…
• Laurel Progress RingA hairline ring with an olive arc and a wreath of twenty-four tapered leaves that light in proportion to the value, a display figure with 'per cent'…
• Grout ProgressA glazed track inside a grout frame, divided into eight modules by grout channels, filling module by module in cobalt with a firm 500 ms grout-fill…
• Vein ProgressA leaf-vein progress line on a pressed-fibre card: a midrib with nine side veins drawn faint as the skeleton, and a moss copy clipped to the value that…
• Atmospheric SkeletonA 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…
• Boss Health BarBoss Health Bar control in the 8-Bit Gaming system.
• Arcade Continue CountdownArcade Continue Countdown control in the 8-Bit Gaming system.