进度条

<style>
#load{z-index:1;width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
</style>
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
<script>
var i=0;
function test(){
 i++;
 document.getElementById("loading").style.width = i + "%";
 document.getElementById("loadtext").innerText = i + "%";
 if(i<100)setTimeout("test()",500);
}
setTimeout("test()",100);
</script>
test()是个测试，你实际应用的时候，根据(当前已经生成的数量/总共要生成的数量)*100=当前进度
然后根据进度重新设置#loading的宽度和#loadtext的内容就行了