Animated number counter using JQuery

Creating a simple animated number counter using JQuery animate function.

Animated number counter using JQuery

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

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…

Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.