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
0 Comments
Loading...