NProgress頁面頂部加載進度條的使用

一、基本本本的使用方法

1.傳統方法使用标簽引入

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

2.通過nodejs安裝

npm install --save nprogress

import NProgress from 'nprogress' // Progress 進度條
import 'nprogress/nprogress.css' // Progress 進度條樣式
           

3. 基本用法：隻需要調用NProgress的 start() 和 done() 的API來控制進度條

NProgress.start();	//顯示進度條
NProgress.done(); //完成進度條
           

二、 進階一點點點的使用方法

1. 百分比：通過設定progress的百分比，調用 .set(n)來控制進度，其中n的取值範圍為0-1

NProgress.set(0.0);    
NProgress.set(0.4);
NProgress.set(1.0); 
           

1. 遞增：要讓進度條增加，隻要調用 .inc()。這會産生一個随機增量，但不會讓進度條達到100%。此函數适用于圖檔加載或其他類似的檔案加載。

NProgress.inc();
           

1. 強制完成：通過傳遞 true 參數給done()，使進度條滿格，即使它沒有被顯示。

NProgress.done(true);
           

1. minimum：設定最低百分比

NProgress.configure({minimum:0.1});
           

1. template：改變進度條的HTML結構。為保證進度條能正常工作，需要元素擁有role=’bar’屬性。

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

1. ease：調整動畫設定，ease可傳遞CSS3緩沖動畫字元串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed為動畫速度（機關ms）。

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