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

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
	}
}

样式挂载

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

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

使用插件

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

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

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

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

控制进度条的速度

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

下载和dome

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

文章版权归作者所有，未经允许请勿转载。

THE END

网站笔记
# WordPress # 代码 # 顶部 # 特效 # 网页 # 加载 # 进度条