Gauge Arc
A speedometer-style 270-degree dial fills clockwise while a needle swings from empty to a seventy-percent reading.
CSS
Gauge
5 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 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.
CSS