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