<h3>Scroll Down</h3>
*<br>*<br>*<br>*<br>*<br>*<br>*<br>*<br>
*<br>*<br>*<br>*<br>*<br>*<br>*<br>*<br>
*<br>*<br>*<br>*<br>*<br>*<br>*<br>*<br>
*<br>*<br>*<br>*<br>*<br>*<br>*<br>*<br>
*<br>*<br>*<br>*<br>*<br>*<br>*<br>*<br>
<div id="stat-1" class="stat"></div>
<div id="stat-2" class="stat"></div>
<div id="stat-3" class="stat"></div>

.stat{
  margin-bottom: 10px;
  width: 0;
  height: 20px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
#stat-1{
  background-color: red;
}
#stat-2{
  background-color: green;
}
#stat-3{
  background-color: blue;
}
#stat-1.action{
  width: 50%;
}
#stat-2.action{
  width: 75%;
}
#stat-3.action{
  width: 100%;
}

(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery)

jQuery(window).scroll(function(event) {
  
     jQuery(".stat").each(function(i, el) {
	var el = jQuery(el);
       
	if (el.visible(true)) {
	   jQuery('.stat').addClass("action"); 
	} else {
	   jQuery('.stat').removeClass("action");
	}
     });
  
});