<div class="pc-count">
<p class="pc-count__num" role="img" aria-label="12,480 orders shipped"></p>
<p class="pc-count__label">orders shipped</p>
</div>About this animation
A statistic that counts up from zero on load, using a registered integer custom property and a CSS counter, with no script.
How it works
A registered integer custom property, --pc-n, holds the final number. A CSS counter is reset to that value, and a pseudo-element prints the counter. A keyframe animates --pc-n from 0, and because the property is registered as an integer the browser can step through whole numbers while it animates.
Ways to customise it
- Change the initial-value 12480 to your own figure.
- Change the 2.4s duration or the easing curve.
- Add a prefix or suffix with extra content on the pseudo-element.
Good to know
Animating a registered custom property needs a current browser, and older ones just show the final number. The text lives in a pseudo-element, so the aria-label carries the real value for screen readers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.