这种方式实现进度条只需要导入jquery文件就可以用了，非常简单
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-1.9.1.js"></script>
<style>
.progressBar{
width:200px; height:12px; border:1px solid #98AFB7; border-radius:5px; margin-top:10px;
}
#bar{
width:0px; height:10px; border-radius:4px; background:#5EC4EA;
}
</style>
<script type="text/javascript">
function progressBar(){
//初始化js进度条
$("#bar").css("width","0px");
//进度条的速度，越小越快
var speed = 50;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//宽度要不能大于进度条的总宽度
if(nowWidth<=198){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//进度条读满后，停止
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body style="font-family: 微软雅黑; padding:20px;">
<div id="progress" style="100%; height:100%; position:absolute; top:0; left:0; z-index:999; display:block;">
<input type="button" value="开始" onclick="progressBar()" />
<div class="progressBar">
<div id="bar"></div>
</div>
<div>
</body>
</html>