CSS progress bars

Blue progress bar with diagonal stripes scrolling to signal ongoing work.

Loading bar with an unknown duration — an ocean segment sweeps across the track.

Circular blue progress ring built from a single conic-gradient, with the value in the middle.

Five segments light up in sequence in ocean — good for multi-step or signal-strength meters.

Usage meter with a label row and an ocean tri-color fill that animates from zero.

The thin ocean bar that rides the top of the viewport during a route change — races ahead, then fades at 100%.

Storage-breakdown bar in ocean with a legend — segments grow left-to-right in sequence.

Multi-segment usage meter in ocean with a legend, each band growing in turn.

Conic ocean ring with a punched-out center and a numeric readout.

Segmented track with nodes at each boundary, the current leg half-filled and its node pulsing — progress and position in one control.

Semicircular dial built from one conic gradient masked by an inner arc, with the reading in tabular figures so it holds still as it changes.

Charge indicator with the terminal nub drawn as a pseudo-element, so the cell body stays a clean box for the fill to sit inside.

Three nested conic dials each masked to a band, so one element per metric shows three independent values without any overlap maths.

Vertical gauge with a scale beside it, the column anchored to the bottom so it fills upward the way a reading actually behaves.

Labelled proficiency rows on a two-column grid so the name and the figure sit on one line with the track spanning both beneath.

Five-step strength meter that lights bottom-up on a stagger and leaves the tallest bar dark, which is what four-of-five actually looks like on a device.

Analogue gauge whose needle overshoots its reading and settles back, the small correction being what separates an instrument from a bar drawn in a circle.

Onboarding meter that shows the remaining work as items rather than a percentage, the bar and the count agreeing so neither has to be trusted alone.

Circular vessel filled to sixty percent by a slowly rotating blob whose uneven rim reads as a lapping wave.

A row of arrow-shaped chevrons filled left to right, with two more lighting up on hover to preview the next step.

Twelve dots arranged on a ring with eight lit clockwise around a fraction readout; hover previews the ninth.

Slim progress track with a round thumb marker and a floating value bubble that ride the fill as it grows.

Dozens of hairline bars masked from a single gradient, the lit run brightening toward its end and growing on hover.

Game-style experience bar bracketed by current and next level badges, gaining a chunk of XP on hover.