Count

data-count on an element makes the first number in its text count up from zero, once, when it scrolls into view. Separators, decimals and the words around the number are kept.

Basic

<div data-grid="3">
  <article><small>Pages built</small><strong data-count>1,204</strong><span>in 2.4 seconds</span></article>
  <article><small>Commits this week</small><strong data-count>49</strong><span>across four repositories</span></article>
  <article><small>Focus time</small><strong data-count>14.5 h</strong><span>Monday to this morning</span></article>
</div>

14.5 h keeps its decimal and its unit; 1,204 keeps its comma.

Notes

• The run takes 600 ms with an ease-out curve, and happens once per element.
• The last separator is read as a decimal point unless exactly three digits follow it, which makes it a thousands separator instead.
• Numbers are set with tabular figures, so the text does not jiggle while it counts.
• Under prefers-reduced-motion: reduce the final number is shown straight away.