网页顶部加载进度条实现

下面就是简单点实现了这个功能，不同的是进度条颜色不同。

js代码：

 

$({property: 0}).animate({property: 100}, { 
    duration: 5000,//进度条加载进度的速度 
    step: function() { 
        var percentage = Math.round(this.property); 
        $('#progress').css('width',  percentage+"%"); 
        if(percentage == 100) { 
            $("#progress").addClass("done");//100%后消失 
        } 
    } 
}); 

css代码：

 

 

 

 

body{ 
        margin:0; 
} 
#progress { 
        position:fixed; 
        height: 2px; 
        background:#b91f1f; 
        transition:opacity 500ms linear 
} 
#progress.done { 
        opacity:0 
} 
#progress span { 
        position:absolute; 
        height:2px; 
        opacity:1; 
        width:150px; 
        right:-10px; 
} 
 
@-webkit-keyframes pulse { 
        30% { 
                opacity:.6 
        } 
        60% { 
                opacity:0; 
        } 
        100% { 
                opacity:.6 
        } 
} 

 

 

html代码：

 

PS:

js代码中使用起来可以这样：在网页加载页面头部的时候：$({property: 0}).animate({property: 45} //进度条读加载到45%的位置停止
在网页接在尾部的时候：$({property: 95}).animate({property: 100} /进度条读加载到100%的位置并消失。

 

以上是假的加载进度效果，真是的加载进度可以使用pace.js来实现，根据不同业务也可以使用ajax的返回码来修改显示进度。相关正在整理中。