进度条的设计思路其实很简单，外层套一个block元素，内层放一个block元素，分别设定背景色，然后通过js控制内层元素的width按百分比增加，即可实现一个简易的进度条。下面演示一个示例：
HTML ↓：
<div id="loadbar">
<span id="bar"></span>
</div>
CSS↓：
#loadbar{
width: 280px;
background-color: #000;
border: 1px solid #000;
}
#bar{
display: block;
font-size: 12px;
background-color: #00d0ff;
text-align: center;
}
JavaScript↓：
window.onload = function(){
var bar = document.getElementById('bar');
var i = 0;
var go = setInterval(function(){
i += 1;
bar.style.width = i + '%';
bar.innerText = i + '%';
if (i >= 100) {
clearInterval(go);
}
},100);
};
效果↓：
进度条
