Animated Counter

Using of jQuery Animate custom Step function to animate values

by T1MOXA

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

var counter = 200;

$('#users b').each(function () {
	$(this).prop('counter', 0).animate({ counter }, {
		duration: 10000,
		easing: 'swing',
		step: function (now) {
			$(this).text(Math.ceil(now).toLocaleString());
		}
	});
});

setInterval(() => {
	counter += 100;
	$('#users b').each(function () {
		$(this).animate({ counter }, {
    	duration: 10000,
			easing: 'linear',
			step: function (now) {
				$(this).text(Math.ceil(now).toLocaleString());
			}
		});
	});	
}, 10000)