CSS Progress Bars Playground

Wave-animated water rising inside a rounded vessel — perfect for resource meters, storage usage, and "fill your goal" patterns. Two SVG waves drift at different speeds for organic motion.

Numbered steps with a connecting rail that fills as you progress. Completed steps morph into checkmarks via pseudo-elements — ideal for checkout flows, onboarding wizards, and multi-page forms.

A circular progress ring rendered with a real `@property`-animated conic gradient — no SVG, no JS scoring. The percentage in the centre updates with the value via a CSS custom property, and the fill sweeps from 0 to the target on every render.

Discrete signal-bar segments that fill from left to right. Each segment has a distinct highlight, giving a tactile, hardware-keypad feel — great for upload progress and connection strength.

Diagonal candy-stripes shimmer continuously inside the filled portion — instantly reads as "actively in progress." A premium touch lifted from server-software install dialogs and CI build runners.

A premium hero progress bar with a glowing leading edge that pulses gently. The trailing gradient shimmer creates a "comet" feel — perfect for app launchers, splash screens, and SaaS dashboards.

Vertical fundraising-style progress with milestone markers. Each tier ($1k, $5k, $10k) lights up as the bar grows past it — ideal for crowdfunding, sales targets, and quarterly goals.

Stacked horizontal bars with labels and percentages. Each row slides in with a staggered animation — the canonical pattern for portfolios, CV pages, and team skill matrices.

A radial chart with a synchronised counting number in the centre. The ring fills via SVG `stroke-dasharray` (with `pathLength="100"` so the math is honest) while the number animates from 0 — bound by light JS to keep the number truly in sync.

A single bar split into multiple coloured segments — Documents, Photos, Apps, Free. Each segment's width is a CSS variable, with a legend below. Premium pattern for storage dashboards and budget breakdowns.

An SVG semicircular speedometer with a colour-graded arc (red → amber → green), tick marks at 0/50/100, and a needle that sweeps from the bottom. Drives every value via the `--pb-gauge-value` custom property — premium pattern for PageSpeed scores, performance audits, and internet speed tests.

Video-player progress bar with two filled regions: solid played + lighter buffered ahead. A subtle scrubber dot sits at the play head — premium pattern for media players, podcast UIs, and audio dashboards.