进度条样式

<style> 
/*进度条样式*/ 
.progressbar{position:relative;background-color:#eee;height:16px;width:150px;border:1px solid #bbb;color:#222; } 
.progressbar .bar {position:absolute;background-color:#6CFA00;height:16px;width:0;} 
.progressbar .txt{    text-align:center;position:absolute;width:100%;height:100%;}
</style> 

html代码

   <div class="progressbar"> 
        <div class="bar"></div>
        <div class="txt"></div>
    </div> 

JS代码

从0到100%循环运行

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>    
<script type="text/javascript">
$(function(){
function setbar(i){
    $(".progressbar .bar").css("width",i+"%");
    $(".progressbar .txt").text(i+"%");
}
var i;
var run=function (){
if(i<100){
i++;
}
else{i=0;}
setbar(i);
setTimeout(run,40);
}
run();
})

</script>

扩展思路：当需要根据实际情况设置时，只需要带对应代码位置调用setbar(i)传入0到100的参数值即可改变状态