官網文檔大概翻譯了下，部分內容按照小編的語言習慣做了調整。
安裝
npm i nprogress
主頁
資料庫
NProgress
適用於Ajax 類型應用程序的超薄進度條。靈感來自Google，YouTube和Medium。
安裝
將nprogress.js和nprogress.css添加到您的項目。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
$ bower install --save nprogress
$ npm install --save nprogress
基本用法
只需調用start()和done()以控制進度欄。
NProgress.start();
NProgress.done();
使用Turbolinks或類似的東西？確保您使用的是Turbolinks 1.3.0+，並使用以下命令：（在此處說明 ）
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
提示
- 爲您的Ajax通話增加進度！將其綁定到jQuery
ajaxStart和ajaxStop事件。 - 即使沒有Turbolinks / Pjax，也可以製作精美的加載條！將其綁定到
$(document).ready和$(window).load。
高級用法
**百分比：**要設置進度百分比，請致電.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();
如果要增加特定值，可以將其作爲參數傳遞：
NProgress.inc(0.2); // 這將獲取當前狀態值並添加0.2直到狀態爲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>"
});
CSS動畫屬性 easing 和 speed
使用緩動（CSS緩動字符串）和速度（以毫秒爲單位）調整動畫設置。（默認：ease和200）
NProgress.configure({ easing: 'ease', speed: 500 });
自動遞增 trickle
通過將此設置爲來關閉自動遞增行爲false。（默認值：true）
NProgress.configure({ trickle: false });
進度條增加幅度和頻率 trickleRate trickleSpeed
單位分別是 百分比、毫秒
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
？ showSpinner
額，這是個啥？沒明白。
NProgress.configure({ showSpinner: false });
父級容器parent
指定父容器。（默認值：body）
NProgress.configure({ parent: '#container' });
定製化
只需nprogress.css根據自己的喜好進行編輯。提示：您可能只想查找和替換出現的#29d。
隨附的CSS文件非常小…實際上，請隨意對其進行剪貼，並自行製作！