简单的进度条

<div class="progressBar">
<div id="bar"></div>
</div>

css样式

.progressBar{
width: 200px;
height: 8px;
border: 1px solid #98AFB7;
border-radius: 5px;
margin-top: 10px;
}
#bar{
width: 0px;
height: 8px;
border-radius: 5px;
background: #5EC4EA;
}
js代码

progressBar()

function progressBar (){
//初始化js进度条

$("#bar").css("width","0px");

//进度条的速度，越小越快
var speed = 20;

bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
if(nowWidth <= 200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width" , barWidth);
}else{
//进度条读满之后，停止
clearInterval(bar);
}
},speed)

}