GitHub地址
https://github.com/rstacruz/nprogres
演示网站
https://ricostacruz.com/nprogress/
安装NProgress.JS
（1）外链引入方式
<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>
（2）NPM安装方式
$ npm install --save nprogress
import NProgress from 'nprogress' import 'nprogress/nprogress.css'
（3）CDN
https://unpkg.com/[email protected]/nprogress.js https://unpkg.com/[email protected]/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' });
标签：教程,set,configure,默认,done,NProgress,使用,nprogress
From： https://www.cnblogs.com/qingshuihongye/p/16801668.html