nprogress 進度條使用

nprogress

• NProgress 是一個輕量級的進度條組件,使用簡便,可以很方便集成到單頁面應用中
• 官網鏈接 http://ricostacruz.com/nprogress/

安裝

npm

$ npm install --save nprogress

CDN

• https://unpkg.com/nprogress@0.2.0/nprogress.js
• https://unpkg.com/nprogress@0.2.0/nprogress.css

引入

script標簽

<!-- 進度條 -->
<script src='nprogress.js'></script>
<!-- 樣式必須引入 -->
<link rel='stylesheet' href='nprogress.css'/>

模塊導入

import NProgress from 'nprogress' // 進度條
import 'nprogress/nprogress.css' //樣式必須引入

基本用法

• 只需調用start()和done()控制進度欄。

NProgress.start();
NProgress.done();

高級用法

百分比：要設置進度百分比

• 使用 .set(n) 方法
  • 其中n是之間的數字0..1。

NProgress.set(0.0);      // 與.start（）
NProgress.set(0.4);
NProgress.set(1.0);     //與.done（）相同

遞增

• 要遞增進度條，只需使用.inc()。這使它以隨機量遞增。這將永遠不會達到100％：將其用於每次圖像加載（或類似加載）。

NProgress.inc();

• 如果要增加特定值，可以將其作為參數傳遞

NProgress.inc(0.2);     //這將獲取當前狀態值並添加0.2直到狀態為0.994

-強制完成
- 傳遞true到done()，即使未顯示進度條也將顯示進度條。（默認行為是.done()不會做任何事情，如果。開始()不叫）

NProgress.done(true);

• 獲取狀態值：要獲取狀態值，請使用.status

配置

參數	默認值	類型	說明
minimum	0.08	number	更改啟動時使用的最小百分比
easing	ease/200	number/string	使用緩動（CSS緩動字符串）和速度（以毫秒為單位）調整動畫設置,還有一個參數speed
trickle	true	boolean	通過將此設置為來關閉自動遞增
trickleSpeed	/	number	調整點滴/增加的頻率
showSpinner	true	boolean	是否顯示加載icon
parent	body	string	指定此項以更改父容器

示例

 NProgress.configure({
    easing: 'speed',  // 動畫方式    
    speed: 500,  // 遞增進度條的速度    
    showSpinner: false, // 是否顯示加載ico    
    trickleSpeed: 200, // 自動遞增間隔    
    minimum: 0.3 // 初始化時的最小百分比
});