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