Animated number counter using JQuery
JavaScript HTML JQuery

Animated number counter using JQuery

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

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.

Requirements

  • JQuery

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

0

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

<!DOCTYPE html>
<html>
	<head></head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="item-animate">
    	<h2 class="code">0</h2>
    </div>
    <script>
        $({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
            duration: 8000,
            easing: 'linear',
            step: function () {
            $('.code').html(Math.floor(this.countNum) + "+");
        },
        complete: function () {
            $('.code').html(this.countNum + "+");
            //alert('finished');
        }
        });
    </script>
</body>
</html>

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 simple animated number counter [https://www.geekinsta.com/animated-number-counter-using-jquery/]. In this article, we’ll learn how to create a responsive counter section on your web page. In this example, I’m using * Bootstrap 4…