Simple jQuery Stats Counter

Simple jQuery Stats Counter

Add stats to your website, like completed projects, total clients, team members count, etc with this simple and nicely working stats counter built with HTML, CSS and jQuery.

HTML:

<div class="count" data-count="50">0</div>
<div class="count" data-count="250">0</div>
<div class="count" data-count="500">0</div>

CSS:

.count {
float:left;
display:inline-block;
width:100px;
height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
color:#000;
line-height:100px;
text-align:center;
background:#f9f9f9;
border:5px solid #eee;
padding:20px;
margin:0 20px 0 0;
}

jQuery:

$('.count').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
}, {
duration: 2000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

DemoDownload

You may also like