概念

  1. NProgress.js提供页面加载进度条效果，当页面打开加载时，在页面顶部会出现进度条加载动画。
  2. NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。

使用方法

引入css和js文件。

<link rel="stylesheet" href="css/nprogress-extend.css">
<script src="js/nprogress.js"></script>

NProgress.start() — 显示进度条
NProgress.set(0.4) —设置百分比
NProgress.inc() — 增加一点点
NProgress.done() — 完成进度条

使用

  1. 通过 minimum 来修改最小百分比

    NProgress.configure({ minimum: 0.1 });

  2. 通过 template 修改标记结构

    NProgress.configure({
template: "..."
});

    **注意：**为了保证进度条正常工作，需要一个包含 role=‘bar’ 属性的元素。

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

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

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

    NProgress.configure({ trickle: false });

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

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

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

    NProgress.configure({ showSpinner: false });

  7. 更改颜色

    <style>
    .bar{
        background-color: red;
    }
</style>

    一般写一个nprogress-extend.css，在里面更改直接引用。

补充使用

Ajax 调用： 我们可以绑定它到 jQuery ajaxStart 和 ajaxStop 事件上