An animated counter up can bring a nice visual value to your website especially when you want to show your users a progress or some of your stats. In this article I will show you how easy it is to show an animated counter up thanks to the jQuery.CounterUp plugin.

Don’t hesitate to check the demo if you want to have an idea of the result we will get :

See Demo

In this demo you can see that we have two counters with different configurations since the first one takes more time to “count up” than the second one. I will now show you have to replicate this result on your website.

Integrating jQuery.CounterUp to your website…

First of all, you will need to download the jQuery script on the author’s Github.

From the downloaded package, you will only need one file to make it works which is “jquery.counterup.min.js”... However, this plugin also depends on another one which is called “jquery.waypoints.min.js”. We will need to make sure this one is also imported in your website to make everything work perfectly. For this dependency, no need to download anything, we will use a CDN to import it.

So once you have downloaded the file jquery.counterup.min.js, just transfer it on your website and import it in your code after your jQuery call, along with jquery.waypoints.min.js from its CDN, like this :

<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>

Now, let’s write some HTML that will contain your numbers with some classes that we will later use with jQuery.CounterUp :

<h1><span class="counter_1">9.121</span> Downloads</h1>
<h3>For <span class="counter_2">1,881,982</span> visits</h3>

In the above code, you can see that I use the “span” tags with two different classes “counter_1” and “counter_2”. Of course you can use the names and the HTML tags you want.

Now the fun part, let’s apply the jQuery plugin on our HTML, in my case it’s the following :

$(".counter_1").counterUp({
	delay: 10,
	time: 3000
});

$(".counter_2").counterUp();

In this code, we have our two HTML classes again with two different calls to the jQuery.CounterUp plugin. In the first call, I have passed two parameters to slow down the count animation (as you can see in the demo). More parameters can be set and you can find the complete list on the author’s Github.

As you can see, jQuery.CounterUp is pretty easy to integrate. Just two JS imports, a few HTML lines and the jQuery calls.

Feel free to download the sources of the demo here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :