依靠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，以彻底转变默许的内部组织。临时用不到。
