1、HTML写法
//进度条样式隐藏
<div id="jindu" style="position:absolute;z-index:55;border:0px red solid;width:89%;height:75%;margin:10% 0 0 5%;background:rgb(0,51,102,0.6);float:left;display:none;">
<div id="wai">
<div id="nei" style="width: 0;">0%</div>
</div>
</div>
//为按钮绑定dian()方法
<div id="chuli" style="position:fixed;margin:2% 0 0 65%;width:10%;height:5%;border:1px solid white;text-align:center;border-radius: 6px;line-height:30px;" onclick="dian()">
<span style="color:white;font-weight:bold;font-size:14px;font-family:Microsoft YaHei;">数据处理</span>
</div>
2、JS写法
function dian () {
document.getElementById("jindu").style.display=‘‘;
var nei = document.getElementById("nei"); //找到内部div元素
var width1 = 0; //起始宽度
var id = setInterval(frame,10); //定义id，用10毫秒调用frame的值
function frame () {
if (width1>=100) {
clearInterval(id); //判断，如果宽度大于或等于100，清除
document.getElementById("jindu").style.display=‘none‘;
} else{
width1++;
nei.style.width = width1+ ‘%‘;
nei.innerHTML = width1+ "%" //在网页中写出nei的值
}
}
}
3、CSS写法
#wai{
width: 40%;
height: 30px;
border: 1px solid #99CC33;
background-color: #999999;
margin:20% 0 0 30%
}
#nei{height: 30px;
background-color: #99CC99;
text-align: center;
line-height: 30px;
color: white;
}
原文地址：https://www.cnblogs.com/gsjdeboke/p/11555872.html