Animated Counter

Using of jQuery Animate custom Step function to animate values

by smartcam

HTML

<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
<div id="users"><b counter="0">0</b></div>
<i class='far fa-envelope' style='font-size:200px;color:white'></i>

CSS

@import "https://fonts.googleapis.com/css?family=Abel&amp;text=0123456789";
body {
    font: normal 64px Abel;
    text-transform: uppercase;
    color: #000;
    background-color: lime;
}

b {
    color: #FFF;
}

JavaScript

function update_users_count() {
    $('#users b').animate({
        counter: ~~(12741)
    }, {
        duration: 5*60*1000,
        easing: 'linear',
        step: function(now) {
            $(this).text(Math.ceil(now));
        },
        complete: update_users_count
    });
};

update_users_count();