NProgress使用教程

GitHub地址

rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc (github.com)

演示网站

NProgress: slim progress bars in JavaScript (ricostacruz.com)

安装NProgress.JS

（1）外链引入方式

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

（2）NPM安装方式

$ npm install --save nprogress

（3）CDN

https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css

用法

（1）基础用法

NProgress.start();
NProgress.done();

（2）高级用法

设置百分比：调用 .set(n) 方法，其中n的范围0-1

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

增量：调用 .inc() 方法，以随机量递增进度条，永远不会达到100%，用于每个图像负载（或类似）

NProgress.inc();

特定值增量：调用 .inc(n) 方法以特定值递增进度条

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

强制完成：通过传递 true 到 .done() 方法，将显示进度条，即使它未显示（默认如果不调用 .start() 方法， .done() 方法不会做任何事）

NProgress.done(true);

获取状态值：使用 .status 获取状态值

配置

minimum：更改启动时使用的最小百分比（默认：0.08）

NProgress.configure({ minimum: 0.1 });

template：可以使用 template 更改标记，若要使进度条保持工作，请将元素 role='bar' 保留在那里，参阅默认模板以进行参考

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

easing和speed：使用 easing（a CSS easing string）和 speed（ms）调整动画（默认：ease 和 200）

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

trickle：将其设置为 false 关闭自动递增行为（默认：true）

NProgress.configure({ trickle: false });

trickleSpeed：调整滴答/递增的频繁度（以ms表示）

NProgress.configure({ trickleSpeed: 200 });

showSpinner：将其设置为 false 来关闭 Loading Spinner（默认：true）

NProgress.configure({ showSpinner: false });

parent：指定此选项以更改父容器（默认：body）

NProgress.configure({ parent: '#container' });

定制

根据您的喜好编辑 nprogress.css 文件