Web元素设计之进度条

进度条的设计思路其实很简单，外层套一个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);
};

效果↓：

进度条