jquery进度条效果代码，jquery进度条实现步骤分享

<script type="text/javascript" src="/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
html,body,div,p{
marrgin:0;padding:0;
}

body {
width: 100%;
height:100%;
background-color: #096;
background-repeat:no-repeat;
}

#bar{
height: 4%;
width: 33%;
background-color: #F0F0F0;
border: 1px solid #AAA;
border-radius:10px;
position:absolute;
top:46%;
left:34%;

}

#bar .finish {
height: 100%;
width: 0%;
background-color: #FC0;
border-radius:5px;
}

#bar .ing{
color:#FFF;
text-align:center;
font-family:"微软雅黑",Verdana, Geneva, sans-serif
}
</style>

 

<script type="text/javascript">
$(function(){
var i =0;
var ms = 6000; //变量MS: 从0%到100%需要的毫秒数
var time = setInterval(function(){
$("#bar .finish").css("width",i+"%");i=i+(1000/ms);
$("#bar .ing").text(Math.round(i)+"%")
if(i>100){
clearInterval(time);
$("#bar .ing").text("100%")
}},10);
});
</script>
 

<div id="bar">
<div class="finish"></div>
<p class="ing">0%</p>
</div>