Animated Counter

Using of jQuery Animate custom Step function to animate values

by Vladimir Sobolev

HTML

<div id="users">Counter: <b counter="0">0</b></div>

CSS

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

b {
    color: #0A8;
}

JavaScript

function update_users_count() {
    $('#users b').animate({
        counter: ~~(Math.random() * 256)
    }, {
        duration: 6000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        },
        complete: update_users_count
    });
};

update_users_count();