Animated number counter using JQuery
JavaScript HTML JQuery

Animated number counter using JQuery

Mishel Shaji
Mishel Shaji

Using animations on a website is one of the best ways to create a visual impression. In this article, we’re going to create an animated number counter using JQuery.


  • JQuery

Using JQuery animate function, it’s very easy to create an animated number counter.


You can create the above displayed animation using the following code.

<!DOCTYPE html>
	<script src=""></script>
    <div class="item-animate">
    	<h2 class="code">0</h2>
        $({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
            duration: 8000,
            easing: 'linear',
            step: function () {
            $('.code').html(Math.floor(this.countNum) + "+");
        complete: function () {
            $('.code').html(this.countNum + "+");

Download source code and demo

Your subscription could not be saved. Please try again.
Hey, We've sent an email to your inbox with the download link. If you did not receive the email, please wait for a few minutes and check the spam folder or promotions tab.

Here’s a video tutorial:

Creating a responsive counter section
In my previous post about JQuery animation, I showed how to create a simpleanimated number counter[]. In thisarticle, we’ll learn how to create a responsive counter section on your webpage. In this example, I’m using * Bootstrap 4…