smooth loading bar percent

by Juan Muñoz

HTML

<div class="global">
    <span class="old_percent"></span>
    <span class="percent">0%</span>
</div>

<div class="progress">
    <span class="progress_text">Blah blah</span>
    <!--<span class="old_percent"></span>
    <span class="percent">0%</span>-->
    <div class="bar"></div>
</div>

CSS

.progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 padding: 3px;
}

.progress .progress_text, .progress .percent, .progress .old_percent {
 position: absolute;   
 left: 50%;
}

.global {
  width: 500px;
  position: relative;
  display: block;
  height: 30px;   
}

.global .progress_text, .global .percent, .global .old_percent {
  position: absolute;
}

.bar {
 height: 20px;
 background-color: green;
 width: 0%;
}

JavaScript

var percent     = 0,
    old_percent = 0,
    diff        = 0,
    fadeTime    = 300,
    refreshInterval = 1000;

window.setInterval(function() {
      old_percent = percent;
      diff = percent;
    	if ( diff >= 0 && diff <= 100 ){
      	console.log(diff)
        $('.old_percent').fadeIn(0).html(old_percent + '%').fadeOut(fadeTime);
        $('.percent').fadeOut(0).html(percent + '%').fadeIn(fadeTime);
        $('.bar').animate({width: (diff >= 0 ? '+' + percent + '%' : percent + '%') });
      }else{
      	return;
      }
      
      percent++;
}, refreshInterval);