PHP教程 Css教程 操作系统 数据库

 

页头部分 

CSS

我们要设置loading进度条的样式，设置背景色，高度，以及位置，优先级等。
 
.loading{
    background:#FF6100; //设置进度条的颜色
    //设置进度条的高度
    position:fixed; //设定进度条跟随屏幕滚动
    top:0; //将进度条固定在页面顶部
    z-index:99999  //提高进度条的优先层级，避免被其他层遮挡
}

接下来，我们要在每个节点后面加上进度动画，使用jQuery来实现。
 

 

页头部分 

 

javascript"> 

    $('.loading').animate({'width':'33%'},50);  //第一个进度节点 

 

 

左侧内容 

 

 

    $('.loading').animate({'width':'55%'},50);  //第二个进度节点 

 

 

右边侧栏 

 

 

    $('.loading').animate({'width':'80%'},50);  //第三个进度节点 

 

 

页脚部分 

 

 

    $('.loading').animate({'width':'100%'},50);  //第四个进度节点 

可以看出，没加载一个节点后，jQuery调用animate()动画方法实现进度条宽度的变化，每个节点变化以50毫秒时间让进度条看起来更流畅些，最终从0%变化到100%，完成了进度条的进度动画。
当进度条达到100%后，页面加载完成，最后还有一步要做的就是隐藏进度条。
 

$(document).ready(function(){ 

    $('.loading').fadeOut();     

});

请查看演示DEMO，在DEMO页面顶部会有一个红色的进度条表示页面加载的进度。

• 上一个： 使用 slimerjs 抓取 DDos 保护的站点

• 下一个： WordPress中实现每篇文章只允许用户评论一次