顶部进度条

CSS

#div-loading {
    /* width: 100%; */
    height: 3px;
    /* background: #424242; */
    background : #ed6d00;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
}
#div-loading.done {
opacity : 0;
transition : opacity 500ms linear; /* 消失动画效果 */
}

JQuery

//进度条渲染和隐藏
$({property : 0}).animate({property : 100}, {
    duration : 1500,//1.5s
    step : function(){
        var percentage = Math.round(this.property);
        $("#div-loading").css('width' , percentage + "%");
        if(percentage == 100){
            $("#div-loading").addClass("done");//完成
        }
    }
});

效果