<!DOCTYPE html>
<html lang="en">

<head>
	<title>jquery animated number counter from zero to value - javascript animation</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #DCDCDC;
        }
        #container {
            width: 200px;
            border: 1px solid #d6d7da;
            padding: 2px 2px 2px 2px;
            border-radius: 5px;
            font-family: arial;
            line-height: 16px;
            color: #333333;
            font-size: 14px;
            background: #ffffff;
            float: left;
            margin: 5px;
        }
        .count {
            line-height: 60px;
            color: black;
            margin-left: 30px;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <h1> Number of User Online Now </h1>

    <div id="container"><span class="count">200</span>
    </div>

    <div id="container"><span class="count">3300</span>
    </div>

    <div id="container"><span class="count" id="count">20550</span>
    </div>


    <div style="clear:both;">
        <br/>
        <a href="http://www.skptricks.com/2018/01/jquery-animated-number-counter-from-zero-to-value.html" >Check Out Our Blog.</a>
    </div>
    <br />
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      

</body>

</html>
$('.count').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        }
    });
});

jQuery(document).ready(function($) {
	
    setInterval(function() {
        updateValue();
    }, 6000);

});

function updateValue() {

    $('#count').html(Math.floor(Math.random() * (1000 - 1)) + 1);
    $('#count').each(function() {

        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.