Stats Count jQurery

by Bui Dinh Luyen

HTML

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<div class="social-follower">
    <div class="social-box">
        <div class="s-icon icon-google"><i class="fa fa-google-plus"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">832</div>
            <div class="s-text">People</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-facebook"><i class="fa fa-facebook"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">1993</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-twitter"><i class="fa fa-twitter"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">532</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
    <div class="social-box">
        <div class="s-icon icon-github"><i class="fa fa-github fa-6"></i></div>
        <div class="social-count">
            <div class="s-number stat-count">333</div>
            <div class="s-text">Follow</div>
        </div>
    </div>
</div>

CSS

*{margin:0;padding:0;list-style:none;text-decoration:none;border:none;outline:none;}
body {margin:50px;background:#242424}

.social-follower,
.social-box,
.social-box .social-count,
.social-box .social-count .s-number,
.social-box .social-count .s-text {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.social-follower {
  height:60px;
  margin-left:-10px; /*-- Resize box Responsive --*/
  margin-right:-10px; /*-- Resize box Responsive --*/
}
.social-box {
  width: 50%;
  float: left;
  padding: 0 10px; /*-- Resize box Responsive --*/
  margin-bottom: 10px;
  display: inline-block;
}
.social-box .s-icon {
  position: relative;
  width: 60px;
  height: 60px;
  display: block;
  line-height: 60px;
  text-align: center;
  font-size: 22px;
  background-color: #222;
  color: #fff;
  float: left;
}
/*-- Tạo độ bóng cho icon bằng hình tam giác --*/
.social-box .s-icon:before {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 60px 0 0;
  border-color: rgba(255,255,255,0.1) transparent transparent transparent;
  position: absolute;
  left: 0;
  top: 0;
}
.social-box .social-count {
  background: #f0f0f0; /*-- Màu nền của nội dung --*/
  text-align: center;
  overflow: hidden;
}
.social-box .social-count .s-number {
  color: #222;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0;
  height: 30px;
  padding-top:10px;
}
.social-box .social-count .s-text {
  text-transform: uppercase;
  font-size: 10px;
  color: #999;
  line-height: 30px;
}

/*-- Thiết lập màu nền cho mỗi mạng xã hội khác nhau --*/
.social-box .icon-facebook {
  background-color: #3b5998;
}
.social-box .icon-google {
  background-color: #dd4b39;
}
.social-box .icon-twitter {
  background-color: #55ACEE;
}

JavaScript

(function($) {
		"use strict";
		function count($this){
		var current = parseInt($this.html(), 10);
		current = current + 1; /* Where 50 is increment */	
		$this.html(++current);
			if(current > $this.data('count')){
				$this.html($this.data('count'));
			} else {    
				setTimeout(function(){count($this)}, 50);
			}
		}        	
		$(".stat-count").each(function() {
		  $(this).data('count', parseInt($(this).html(), 10));
		  $(this).html('0');
		  count($(this));
		});
   })(jQuery);