live Counter using jQuery & CSS

In this post I want to explain how to do
live counter or
increment value using jQuery. It is very useful to show your website statistics like Today Visitors, Total online users, Total Posts & all statistics etc.

It is interesting & just ten lines of jQuery code. Please use this code & take your website design to next level.

HTML:

<div class="stat">

    <span class="stat-count">4200</span>

    <p class="stat-detail">Subscribers</p>

</div>




CSS:

.stat {

    padding:20px 5px;

    background:#336699;

    text-align:center;

    float:left;

    margin-left:100px;

    width:150px;

}

.stat-count {

    font-size: 51px;

    font-weight: normal;

    letter-spacing: -0.02em;

    line-height: 1.2;

    margin-bottom: 20px;

    overflow:hidden;

    font-family:"Georgia", Courier, monospace;

    padding: 0;

    position: relative;

}

.stat-detail {

    color:#fff;

    padding-top:10px;

    font: italic 1.3rem/1.75 "Georgia", Courier, monospace;

}







JQuery:




jQuery(document).ready(function() {

    function count($this){

        var current = parseInt($this.html(), 10);

        current = current + 1; /* Where 1 is increment */

        $this.html(++current);

        if(current > $this.data('count')){

            $this.html($this.data('count'));

        } else {

            setTimeout(function(){count($this)}, 50);

        }

    }

    jQuery(".stat-count").each(function() {

      jQuery(this).data('count', parseInt(jQuery(this).html(), 10));

      jQuery(this).html('0');

      count(jQuery(this));

    });

});




I hope you will like this tutorial. You can use this code in your live projects.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

View Live Demo