用html实现进度条效果,jquery实现一个漂亮的进度条的效果

jquery实现一个进度条的效果，或许在这里没有什么实际的作用，但是已经实现了进度条的部分原理，前端是怎么实现那种进度效果的。

效果演示：

效果1

效果2

js进度条实现源码：

.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;}

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);

}