前言
网站加入加载进度条,是件很酷的事情。NProgress.js 就是一个不错的插件。
官网地址:http://ricostacruz.com/nprogress/
CDN: http://www.bootcdn.cn/nprogress/
使用
NProgress 依赖于 jquery1.8 以上的版本。所以,在使用之前,先引入jquery。NProgress有自己的样式文件,也要引入进来。所以,在使用之前,要引入对应的css, js。如:
<link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
引入上边文件后,你就可以任意的使用了。其常用方法以及配置。
NProgress.start(); #进度条开始运行了
NProgress.done(); #进度条结束
NProgress.set(0.3); #设置运行到的进度,最小为0,最大为1
NProgress.inc(); #进度增加一点点
NProgress.configure({ showSpinner: false }); #配置 (禁用进度环)
可配置的属性:
var Settings = NProgress.settings = {
minimum: 0.08,
easing: 'ease',
positionUsing: '',
speed: 200,
trickle: true,
trickleRate: 0.02,
trickleSpeed: 800,
showSpinner: true,
barSelector: '[role="bar"]',
spinnerSelector: '[role="spinner"]',
parent: 'body',
template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
};
有 easy,speed,template等可配置。
细节
进度条的目的就是展示给用户,该网站内容加载了多少。在什么时候开始加载,在什么时候结束呢。由于引入了 jquery 。所以,我们可以在 $(document).ready() 中开始,在 $(window).on("load", fun) 中结束。当然,你可以更早的开始。比如你引入了js之后,就可以开始了。
$(document).ready(function(){
NProgress.start();
});
$(window).on("load", function(){
NProgress.done();
})
默认,插件会显示在顶部,颜色是#29d,高度是2px。所以,如果你想改变该样式,可以在引入css之后,从新定义样式。如:
#nprogress .bar{
background: #fd3b61;
}
NProgress不仅用在网页加载进度显示,ajax的请求过程也可以使用。当然,方法还是一样的。什么时候开始,什么时候结束。
额外
在页面中,也有其他进度条工具。下边这个还不错:
http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-3-4/#h-default