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');
}
});
});
