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
（3）CDN
用法
（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 文件
原文：https://www.cnblogs.com/d-lir/p/14018641.html