CSS Progress & Meters Effects

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.

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.

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.

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.

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

Graduated pressure strip split into safe, warning and danger bands, with a pointer drifting across the reading.

Running total shown on a mechanical counter — five digit wheels behind a shaded bezel, the four higher ones holding their reading while the red units wheel turns continuously through a strip that ends on a duplicate zero so the loop never jumps.

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

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.

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

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.

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

Progress track with pennant flags planted at each reward point, the ones already passed lit in the same colour as the fill.

Percentage drawn as a hundred-cell waffle, one square per point, sixty-eight of them lit in a blue-to-indigo run that stops part way through a row; hovering lights the next seven in a paler tint to preview the charge.

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

Media scrubber showing three states in one track — played, buffered ahead and not yet loaded — with a knob that swells on hover.

Signed deviation read from a centre zero rather than from the left edge — the amber fill runs right of the line for over-plan and a green one runs left for under, with a dashed target marker and a readout that swaps sign as the value crosses on hover.

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.

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