WordPress 使用代码给网页顶部加上加载进度条特效

网页头部加一个网页加载进度条,看起来还是挺有意思的。其实制作很简单,只需要用JS监听网页加载进度即可。

使用jQuery

$({
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%后消失
}
}
});
$({
    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%后消失
        }
    }
});
$({ 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
}
}
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
  }
}
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 } }

样式挂载

网页可以用JS在body头部插入一个元素,作为进度条,不想那么麻烦,也可以直接写代码:

<body>
<div id="progress">
<span><span>
</div>
</body>
<body>
    <div id="progress">
        <span><span>
    </div>
 </body>
<body> <div id="progress"> <span><span> </div> </body>

使用插件

nprogress是一个jQuery插件,只有几K大小。使用起来非常方便和简单。先引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>

控制显示,下面这两句代码,分别放到页面开头和网页加载完成事件里面即可。

NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条
NProgress.start();//开始加载进度条
NProgress.done();//停止显示进度条
NProgress.start();//开始加载进度条 NProgress.done();//停止显示进度条

控制进度条的速度

NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done()

下载和dome

注:以上两种下载方式都可以,任选其一。

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
Pain changes people. However, love will finally guide them back.
伤痛会改变一个人,但爱最终总会让你找回最初的自己
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容