progress进度条样式

已完成进度：在ie中由color控制，在谷歌中由background控制，在火狐中由background控制；代码如下

progress {border: 0;background-color: #eee;color: red;} /*IE9以上*/
progress::-moz-progress-bar { background: red; }
progress::-webkit-progress-bar { background: #eee; }
progress::-webkit-progress-value  { background: red; }

今天由于要兼容ie8，这个进度条又不能用了，得嘞，用js写一个

<div class="progress-box">
    <div class="progress-bar"></div>
</div>

function progress(max) {
    var bar = $(".progress-bar");
    var num = 0;
    clearInterval(aide.timer.progress);
    aide.timer.progress = setInterval(function () {
        num+=1;
        bar.width(num);
        if(num>=max){
            bar.width(max);
            clearInterval(aide.timer.progress);
        }
    },20)
};
progress(170)

/*自定义进度条*/
.progress-box{
    position: relative;
    height: 4px;
    width: 168px;
    border: 1px solid #E9E9E9;
    border-radius: 3px;
}
.progress-bar{
    position: absolute;
    height: 6px;
    top: -1px;
    left: -1px;
    border-radius: 3px;
    background-color: #87D068;
}
/*自定义进度条end*/

需要开始进度时触发进度条函数就可以了