Progress & Status

Battery Charge

Battery 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.

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

Device status dashboards, charging screens, download or sync progress with a dark-mode tech aesthetic.

When not to

Light backgrounds (colors hardcoded dark). Contexts needing real-time data — fill is purely CSS-animated, not data-driven.

Working with an AI agent

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

Change fill to electric green by setting --a to #22c55e and --a2 to #4ade80, and slow the cycle from 6s to 9s. 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

fill accent colors (--a, --a2, --hi)
animation cycle duration (6s in pg07-charge/sheen/done keyframes)
segment count (number of <i> in .pg07-segs)
charged glow color (rgba in .pg07-done box-shadow)
percentage steps (stops array + @keyframes pg07-num)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

role=progressbar with aria-valuemin/max/now/text
prefers-reduced-motion guard (static 74% fallback)
visibilitychange pause/play in IIFE
transform-origin:left center on .pg07-fill
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

Percentage counter uses CSS content: steps — jumps in discrete increments at keyframe stops, not smoothly interpolated
Fill is not data-driven; real charge data requires replacing CSS animation with JS scaleX updates
Colors hardcoded for dark backgrounds — light-theme use needs full color overhaul

batteryprogresschargingstatusglowui-componentmonospace

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.
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.