jQuery counter to count up to a target number

I'm trying to find out if anyone knows about an already existing jQuery plugin that will count up to a target number at a specified speed.

For example, take a look at Google's number of MB of free storage on the Gmail homepage, under the heading that reads "Lots of space". It has a starting number in a <span> tag, and slowly counts upward every second.

<span>

I'm looking for something similar, but I'd like to be able to specify:

10 Answers
10

I ended up creating my own plugin. Here it is in case this helps anyone:

(function($)
$.fn.countTo = function(options) );

// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;

return $(this).each(function()
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);

function updateTimer()
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));

if (typeof(options.onUpdate) == 'function')
options.onUpdate.call(_this, value);


if (loopCount >= loops)
clearInterval(interval);
value = options.to;

if (typeof(options.onComplete) == 'function')
options.onComplete.call(_this, value);



);
;

$.fn.countTo.defaults =
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
;
)(jQuery);


Here's some sample code of how to use it:

<script type="text/javascript"><!--
jQuery(function($)
$('.timer').countTo(
from: 50,
to: 2500,
speed: 1000,
refreshInterval: 50,
onComplete: function(value)
console.debug(this);

);
);
//--></script>

<span class="timer"></span>


View the demo on JSFiddle: http://jsfiddle.net/YWn9t/

You can use the jQuery animate function

// Enter num from and to
$(countNum: 99).animate(countNum: 1000,
duration: 8000,
easing:'linear',
step: function()
// What todo on every count
console.log(Math.floor(this.countNum));
,
complete: function()
console.log('finished');

);


http://jsbin.com/upazas/958/

complete

$('#counter').text(this.countNum);

Math.floor(this.countNum)

this.countNum.toFixed(2)

I've created the tiniest code to do exactly that. It's not only for counting but for any task that needs to run in a given time. (let's say, do something for 5 seconds):

var step = function(t, elapsed)0;
;

var done = function()
console.log('done counting!');
;


// Do-in settings object
var settings =
step : step,
duration : 3,
done : done,
fps : 24 // optional. Default is requestAnimationFrame
;

// initialize "Do-in" instance
var doin = new Doin(settings);


Don't know about plugins but this shouldn't be too hard:

;(function($)
$.fn.counter = function(options)
// Set default values
var defaults =
start: 0,
end: 10,
time: 10,
step: 1000,
callback: function()

var options = $.extend(defaults, options);
// The actual function that does the counting
var counterFunc = function(el, increment, end, step)
var value = parseInt(el.html(), 10) + increment;
if(value >= end)
el.html(Math.round(end));
options.callback();
else
el.html(Math.round(value));
setTimeout(counterFunc, step, el, increment, end, step);


// Set initial value
$(this).html(Math.round(options.start));
// Calculate the increment on each step
var increment = (options.end - options.start) / ((1000 / options.step) * options.time);
// Call the counter function in a closure to avoid conflicts
(function(e, i, o, s)
setTimeout(counterFunc, s, e, i, o, s);
)($(this), increment, options.end, options.step);

)(jQuery);


Usage:

$('#foo').counter(
start: 1000,
end: 4500,
time: 8,
step: 500,
callback: function()
alert("I'm done!");

);


Example:

http://www.ulmanen.fi/stuff/counter.php

I guess the usage is self-explanatory; in this example, the counter will start from 1000 and count up to 4500 in 8 seconds in 500ms intervals, and will call the callback function when the counting is done.

I do not know about any existing plugins, but it seems fairly easy to write one yourself using the JavaScript Timing Events.

A different approach. Use Tween.js for the counter. It allows the counter to slow down, speed up, bounce, and a slew of other goodies, as the counter gets to where its going.

http://jsbin.com/ekohep/2/edit#javascript,html,live

Enjoy :)

PS, doesn't use jQuery - but obviously could.

Try jCounter, it has a customRange setting where you can specify the start and end number, it can count up as well including the fallback you want at the end.

Needed a break, so I cobbled the following together. Not sure it would be worth creating a plugin from though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Counter
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
function createCounter(elementId,start,end,totalTime,callback)

var jTarget=jQuery("#"+elementId);
var interval=totalTime/(end-start);
var intervalId;
var current=start;
var f=function()
jTarget.text(current);
if(current==end)

clearInterval(intervalId);
if(callback)

callback();


++current;

intervalId=setInterval(f,interval);
f();

jQuery(document).ready(function()
createCounter("counterTarget",0,20,5000,function()
alert("finished")
)
)
//]]>
</script>
</head>
<body>
<div id="counterTarget"></div>
</body>
</html>


Another way to do this without jQuery would be to use Greensock's TweenLite JS library.

Demo http://codepen.io/anon/pen/yNWwEJ

var display = document.getElementById("display");
var number = param:0;
var duration = 1;

function count()
TweenLite.to(number, duration, param:"+=20", roundProps:"param",
onUpdate:update, onComplete:complete, ease:Linear.easeNone);


function update()
display.innerHTML = number.param;


function complete()
//alert("Complete");


count();


You can use jquery animate function for that.

$( 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');

);


Here's the original article
http://mishelshaji.co.in/2018/animated-number-counter-using-jquery/

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?