Count Up Numbers: animated statistics on scroll

How to use it

1. Add the script

<script src="countup.js"></script>

2. Add one attribute to your number

Write the number exactly as it should look at the end.

<span data-countup>1,250+</span>
<span data-countup>98.6%</span>
<span data-countup>$4.9M</span>

That is all. The script reads the text and keeps everything around the number: the plus sign, the percent sign, the currency and the letters.

It understands your format

You do not set separators or decimals anywhere. The script takes them from what you wrote.

One rule to know: a dot or comma followed by exactly three digits is read as a thousands separator. So 1.250 means one thousand two hundred and fifty.

All options

A full statistics row

<div class="stats">
  <div><b data-countup>420+</b> projects</div>
  <div><b data-countup data-countup-delay="150">225</b> clients</div>
  <div><b data-countup data-countup-delay="300">4.9</b> average rating</div>
</div>

Start it from your own code

Use this when the number arrives later, for example from your shop or an API.

var counter = CountUp(document.querySelector('#orders'));
counter.to(5320);     // count to a new number, same format
counter.play();       // play the animation again

Good for Google and for visitors

• The real number is in your HTML. Google and visitors without JavaScript read "1,250+", not "0".
• The line does not wobble. The script switches the digits to equal width while they change.
• Screen readers hear the final number once, not every step in between.
• Reduced motion is respected. Those visitors see the final number at once.

Common questions

The number starts before I can see it.

It starts when more than half of the element is on screen. If your number sits at the very top of the page, add a small data-countup-delay.

Can I count down?

Yes. Set data-countup-from to a bigger number than the final one.

Does it work in WordPress and page builders?

Yes. Add the script to your theme, then add the attribute data-countup to a heading or text element. Most builders have a field for custom attributes.

What is in the download

• countup.js the script, about 3 KB
• index.html and demo.css the demo page you see above
• README.txt and LICENSE.txt the short guide and the MIT licence

Licence

MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.