Gauge Arc
A speedometer-style 270-degree dial fills clockwise while a needle swings from empty to a seventy-percent reading.
CSS
Gauge
15 animationsGauge Bars
Four rounded bars rise in quick succession from a baseline to different heights, hold as a small bar chart, then sink and rise again.
CSSGauge Counter
Odometer digits roll to a figure, each column stopping a moment after the one to its right.
CSSGauge Delta
A bar grows against the ghost of its previous period and the difference between them is called out.
CSSGauge Dial
A needle sweeps across a calibrated face, overshoots its reading slightly and settles back onto it.
CSSGauge Donut
A donut fills clockwise to a share of the whole while the remainder stays as a muted track.
CSSGauge Heat
A strip of cells fills by intensity from one end, the hottest cell reached last.
CSSGauge Histogram
Scattered columns settle into a distribution, the centre column resolving last.
CSSGauge Ring
A circular progress ring sweeps clockwise from the top to a three-quarter reading, holds, drains back and sweeps again.
CSSGauge Segments
A ring of ten separated segments lights up one segment at a time clockwise until seven are lit, then steps back down.
CSSGauge Sparkline
A sparkline draws itself left to right, its shaded area fades in beneath and a dot pops onto the final point, then the line unwinds and redraws.
CSSGauge Stack
A single bar divides into stacked parts, each segment claiming its share in turn.
CSSGauge Target
An actual value travels toward a target marker and comes to rest just short of it.
CSSGauge Threshold
A rising reading crosses a marked limit line and the band above the mark takes the accent.
CSSGauge Trend
A trend line draws point by point while a moving average follows it a beat behind.
CSS