js如何实现进度条

直接用div模拟？是要这种情况不？类似下面的效果。<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta content="text/html; charset=GB2312" />
<style>
.a{
position:relative;
height:20px;
border:1px solid #aaa;
}
.b{
position:absolute;
top:0px;
left:0px;
height:20px;
background:#123;
width:0px;
}
</style>
</head>
<body>
<div class = "a" id = "a">
<div class = "b" id = "b"></div>
</div>
</body>
<script>
function getStyle(id){
if(document.defaultView&&document.defaultView.getComputedStyle){  
getStyle = function(id){
var oDiv=document.getElementById(id);
return document.defaultView.getComputedStyle(oDiv);
};  
}else{  
getStyle = function(id){
var oDiv=document.getElementById(id);
return oDiv.currentStyle;
};
}
return getStyle(id);
}
function changeProgess(){
var aWidth = parseInt(getStyle("a").width),
    bWidth = parseInt(getStyle("b").width),
flag = 100;
function change(){
if(bWidth < aWidth){
if(aWidth - bWidth > flag ){
bWidth = bWidth + flag;
}else{
bWidth = aWidth;
}
console.log("bwidth="+bWidth);
document.getElementById("b").style.width = bWidth+"px";
setTimeout(change,1000);
}
}
setTimeout(change,1000);
}
changeProgess();
</script>  
</html>