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 🙂

Live Counter with jQuery

jQuery Code

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

HTML Code

<div class="stat">
    <span class="stat-count">4200</span>
    <p class="stat-detail">Subscribers</p>
</div>

CSS Code

.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;
}

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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/01/Live-Counter-with-jQuery.pnghttp://w3lessons.info/wp-content/uploads/2014/01/Live-Counter-with-jQuery-150x150.pngKarthikeyan KFreebiesjquery
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...