依赖jQuery。
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
$('#btn-loading').on('click', function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})<div id="app">
<button class="btn btn-warn" id="btn-loading">load</button>
</div>
nprogress.start()开始加载，nprogress.done()加载完成
挂载目标
nprogress.configure({ parent: '#app' })改变进度条挂载的目标，默认是<body>
nprogress.configure({ parent: '#app' })
$('#btn-loading').on('click', function () {
nprogress.start()
setTimeout(() => {
nprogress.done()
}, 3000);
})#app {
width: 350px;
border: 1px solid gray;
padding: 5px;
}
进度条动画增量
nprogress.inc()随机生成一个进度条的增量，nprogress.inc(n)指定一个具体增量，n在0~1之间。nprogress.set(n)可以指定一个具体值，而非增量，n在0~1之间。
nprogress.configure({ parent: '#app' })
$('#btn-loading').on('click', function () {
nprogress.start()
var i = 0;
//使用inc()
var timer = setInterval(() => {
if(nprogress.status){
$('#inc_counter').text(i++)
$('#status_counter').text(nprogress.status)
nprogress.inc()
}else{
clearInterval(timer)
}
}, 500);
setTimeout(() => {
nprogress.done()
}, 3000);
})<div id="app">
<button class="btn btn-warn" id="btn-loading">load</button>
<!-- 监视inc()调用与进度条状态-->
<div style="margin-top:5px">
invoke inc times ：
<span id="inc_counter"></span>
<br> noprogress status ：
<span id="status_counter"></span>
</div>
</div>
这里设置了一个定时器，每过0.5秒调用一次inc()，生成随机增量，这里有个问题，如果少了if...else...，会变成如下这个效果。
这是因为，inc()使进度增加超过1时，nprogress.status会变成null，之后又从0重新开始。所以，当nprogress.status为null时，我们停止调用inc()。
如果设置一个指定增量，不会有以上问题。
改变颜色
如果要改变默认颜色，就要在nprogress.css文件中修改。
我复制一份nprogress.css，然后在拷贝中修改颜色，再引用这份拷贝。
// import 'nprogress/nprogress.css'
import './nprogress.scss'
//....../*nprogress.scss*/
$color:#FF5983;
/*原先颜色都替换成$color*/
/* ... */
其他
这些配置都是在NProgress.configure(options)中的options中配置
showSpinner：true/false 是否显示螺旋加载（就是右上角那个圈圈）
trickle：默认情况就是不使用inc()也会有默认增量，这个选项决定是否关闭这个默认增量
trickleSpeed： 默认情况下进度条增加的速度
minimum：进度条初始值
easing、speed：进度条增加时有个动画效果，这两个选项设置动画的贝塞尔曲线及其增加速度，如：
nprogress.configure({ easing: 'cubic-bezier', speed: 200 })
template: 这个进度是被包在一个以下这个role='bar'这个div中的，我们可以通过这个选项重写这个div，以彻底改变默认的内部构造。暂时用不到。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。