NProgress使用教程

GitHub地址

https://github.com/rstacruz/nprogres

 

演示網站

https://ricostacruz.com/nprogress/

 

安裝NProgress.JS

（1）外鏈引入方式

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

（2）NPM安裝方式

$ npm install --save nprogress

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

（3）CDN

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

 

用法

（1）基礎用法

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

（2）高級用法

設置百分比：調用 .set(n) 方法，其中n的范圍0-1

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

增量：調用 .inc() 方法，以隨機量遞增進度條，永遠不會達到100%，用於每個圖像負載（或類似）

NProgress.inc();

特定值增量：調用 .inc(n) 方法以特定值遞增進度條

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

強制完成：通過傳遞 true 到 .done() 方法，將顯示進度條，即使它未顯示（默認如果不調用 .start() 方法， .done() 方法不會做任何事）

NProgress.done(true);

獲取狀態值：使用 .status 獲取狀態值

 

配置

minimum：更改啟動時使用的最小百分比（默認：0.08）

NProgress.configure({ minimum: 0.1 });

template：可以使用 template 更改標記，若要使進度條保持工作，請將元素 role='bar' 保留在那里，參閱默認模板以進行參考

NProgress.configure({
  template: "<div class='....'>...</div>"
});

easing和speed：使用 easing（a CSS easing string）和 speed（ms）調整動畫（默認：ease 和 200）

NProgress.configure({ easing: 'ease', speed: 500 });

trickle：將其設置為 false 關閉自動遞增行為（默認：true）

NProgress.configure({ trickle: false });

trickleSpeed：調整滴答/遞增的頻繁度（以ms表示）

NProgress.configure({ trickleSpeed: 200 });

showSpinner：將其設置為 false 來關閉 Loading Spinner（默認：true）

NProgress.configure({ showSpinner: false });

parent：指定此選項以更改父容器（默認：body）

NProgress.configure({ parent: '#container' });

 

定制

根據您的喜好編輯 nprogress.css 文件