Nprogress的預設進度條很細，它的設計靈感主要來源於 谷歌，YouTube

他的安裝方式也很簡單，你可以有兩種使用方式:

• 直接引入js和css檔案
• 使用npm安裝的的方式

直接引入：

Npm安裝：

基本的使用方式

你可以呼叫 start() 和done()來進行進度條的控制

如果你準備在jQuery的Ajax呼叫介面的時候使用它的話可以考慮將其繫結到 到jQuery ajaxStart和ajaxStop事件。

下面是一個簡單的例項：

高階用法

百分比設定

你可以呼叫.set(n)設定進度百分比，，其中n是0..1之間的數字。你可以手動的設定進度條的位置（百分百0.0~1.0之間）

設定進度條的遞增

你可以使用.inc()來進行進度條的遞增設定，如果它的值為空則以一個隨機的量遞增。這將永遠不會達到100%。

當然你還可以給它設定一個特定的值，用來遞增進度條

你可以使用trickle來關閉遞增行為

通過將此設定為false來關閉自動遞增行為。(預設值是true)

更改啟動時使用的最小百分比。(預設值:0.08)

NProgress.configure({ minimum: 0.1 });

修改進度條的模板

你甚至可以修改進度條的模板，但要保證在頁面留有一個一個role='bar’元素。

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

});

easing 和 speed

可以使用easing (CSS easing字串)和speed (ms)調整動畫的設定。(預設值:ease和200)

showSpinner

你可以通過parent來設定進度條的父容器，預設父容器是body

另外 本外掛的css體積很小，你可以使用它或者選擇自己寫一個也沒問題。

nprogress在Vue中的使用

在router/index.js中建立如下程式碼：

並在main.js中引入 ./router

總結：

nprogress 很優美、靈活，我們可以通過原始碼看到他的所有可以設定的引數

那麼可以根據我們專案需求進行相應的設定。 歡迎關注交流批評指正。