nprogress页面加载进度条使用

来源：互联网发布：遗传算法求解tsp 编辑：程序博客网时间：2024/06/08 13:09

安装

依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。

使用方法

— 显示进度条

—设置百分比

— 增加一点点

— 完成进度条

你也可以...

添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上
没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条！把它绑定到 $(document).ready 和$(window).load

使用方法

1、添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上
2、没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条！把它绑定到 $(document).ready 和$(window).load
```
$(document).ready(function(){    NProgress.start();  });  $(window).load(function(){    NProgress.done();  });
```

3、绑定到 document.onreadystatechange 事件，监听 document.readyState 的状态，当状态为 document.readyState == "complete" 时，页面加载完毕。

(function(){      document.onreadystatechange = function(){        NProgress.start();        console.log(document.readyState);        if(document.readyState == "Uninitialized"){          NProgress.set(1);        }        if(document.readyState == "Interactive"){          NProgress.set(0.5);        }        if(document.readyState == "complete"){          NProgress.done();        }      }  })();

配置插件

通过 minimum 来修改最小百分比。

NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素。

NProgress.configure({  template: "<div class='....'>...</div>"});

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。

NProgress.configure({ ease: 'ease', speed: 500 });

想关闭进度条步进？设置 trickle 为 false。

NProgress.configure({ trickle: false });

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

想禁用进度环？设置 showSpinner 为 false。

NProgress.configure({ showSpinner: false });

0 0