- 超小的全局頂部進(jìn)度條
直接引入
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
npm安裝導(dǎo)入
$ npm install --save nprogress
import NProgress from 'nprogress'
基本用法
NProgress.start()
顯示進(jìn)度條NProgress.set(n)
設(shè)置進(jìn)度條的百分比咕宿，0~1之間
NProgress.set(0.0); // 類似于start()
NProgress.set(0.4);
NProgress.set(1.0); //類似于done()
-
NProgress.inc()
使進(jìn)度條增加一個(gè)隨機(jī)量（非100%）订雾，也可以傳遞一個(gè)增量值，會(huì)在當(dāng)前基礎(chǔ)上增加該值镐牺，最大0.994
NProgress.inc();
NProgress.inc(0.2);
-
NProgress.done()
使進(jìn)度條完成既滿格
NProgress.done()
NProgress.done(true)
NProgress.remove()
NProgress.configure()
傳遞一個(gè)對(duì)象類型配置
- minimum
開始時(shí)的最低百分比（默認(rèn)0.08） - template
進(jìn)度條自定義HTML， - easing & speed
動(dòng)畫設(shè)置魂那，接收CSS3 緩沖動(dòng)畫字符串祈匙，以及動(dòng)畫速度 - trickle
設(shè)置自動(dòng)遞增的默認(rèn)行為（默認(rèn)true） - trickleSpeed
進(jìn)度條默認(rèn)速度 - showSpinner
是否顯示右上角螺旋加載提示 - parent
父容器（默認(rèn)body）
NProgress.configure({
mininum:0.1,
template: "<div class='....'>...</div>",
easing: 'ease', speed: 500,
trickle: false,
trickleSpeed: 200,
showSpinner: false,
parent: '#container'
})
