Simple jQuery Counterup without Plugin

In this post I want to explain how to do live jQuery counterup 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. Everyone wanted to showcase their users, traffic details and other stats to visitors in real time.

This post will help them to learn how to create an real time counter using few lines of jQuery and CSS. Please check out my latest post on Top 20 most popular jquery scripts all the time in 2018

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

In this code snippet, you can able to control the increment value and speed of the counter animation.

jQuery Code to Create jQuery Counterup

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 to Create Live Counter

.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!