Percentage Loading smooth animation

Increase the percentage width of DIV over time till it reaches 100 percentage .

by ajinkyax

HTML

<div class="bg"><div class="inner" id="inner"></div></div>
<div id="count">0</div>

CSS

.bg{
 
  width:200px;
  background-color:black;
  min-height:20px;

}

.inner{
  background-color:green;
  min-height:20px;
}

JavaScript

var start = new Date().getTime() / 1000;
var length = 1;

	window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback,  element){
                window.setTimeout(callback, 120);
              };
    })();


function go(){

var dif = (new Date().getTime() / 1000) - start; 
var minutes = dif / 60;

		
	
	var percentage = (minutes/length) * 100;
	if(percentage > 100){ percentage = 100; }
	
		if( percentage != 100 ){
			document.getElementById('inner').style.width = percentage+'%';
          document.getElementById('count').innerHTML += '<br />' + percentage + '% : ' + (Math.round(2*percentage)) + ' pixels';
          return true;
		} else if (percentage == 100 ){
			document.getElementById('inner').style.width = percentage+'%';
          return false;
		}
}


function Update(){
	
  if(go()){
	requestAnimFrame( Update );	
  }
}

Update();