CountUpNumber

Options

from 0

-1000000000 to 1000000000

Where the count starts. Counting down works: set it above the target.

duration 1800

200 to 8000 ms, good: 1200 to 2500

Milliseconds from start to finish. Under a second reads as a flicker rather than a count. Over three and people have stopped watching.

decimals 0

0 to 6

Decimal places. Left at 0 it follows the element's own text, so 12.50 keeps its two places.

locale empty

BCP 47 locale for grouping and the decimal mark, for example en-GB or de-DE. Empty follows the browser, which is usually right.

prefix empty

Text before the number. Keep currency symbols here rather than in the element's text, so the parser sees a clean figure.

suffix empty

Text after the number, for a percent sign or a unit.

reducedMotionTime 999

0 to 9999 s

The single frame shown when the user prefers reduced motion. For a count this should be a time after it has finished, so the final figure simply appears.

What it needs

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.2 ms · 0 context

Pinned to

v0.6.2

• No canvas and no WebGL. It reads the number already in the element and counts up to it
• Formatting goes through Intl.NumberFormat, so grouping and the decimal mark follow the locale rather than a hand-rolled separator
• The finished figure stays in the accessibility tree as one string, because a screen reader on a live-updating number reads every value it passes
• There is no target option. The number lives in the element, which is what makes the figure correct before any script runs and correct forever if none does
• One Intl.NumberFormat and one textContent write per frame
• Text changes cause layout. Give the element a tabular-nums font or a fixed width or the line will jitter as digits change