javascript Class

HTML

<!DOCTYPE html>
<html>
<body>
<div class='container'>
<h1>Progress Bar</h1>
<div id='progress-bar'>
	<div id='bar'>
	</div>
</div><br>
<div>
	<button onclick='loadBar()'>Load Bar</button>
</div>
</div>
</body>

</html>

CSS

#progress-bar{
	width: 100%;
  	background-color: #ddd;
}
#bar{
	width: 0%;
  	height: 30px;
  	background-color: #4CAF50;
  	text-align: center;
  	line-height: 30px;
  	color: white;
}
.container {
    width: 100%;
}

JavaScript 1.7

function loadBar(){
	var element = document.getElementById('bar');
    element.style.backgroundColor = '#4CAF50';
    var width = 10;
    var id = setInterval(load, 50);
    function load(){
    	if(width >= 100){
        	clearInterval(id);
        }else{
        	width ++;
            element.style.width = width + '%';
            element.innerHTML = width*1 + '%';
            if(width == 100){
            element.style.backgroundColor = 'red';
            }
        }
    }
}