NProgress.js提供頁面加載進度條效果，當頁面打開加載時，在頁面頂部會出現(xiàn)進度條加載動畫。NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應(yīng)用中。
安裝
使用npm安裝
$ npm install --save nprogress
或者直接引用 nprogress.js 和nprogress.css 文件到你的頁面中。
用法
只需要調(diào)用start() 和 done()來控制進度條
NProgress還提供了其他幾個方法，如設(shè)置百分比，調(diào)用 .set(n)來控制進度，其中n的取值范圍為0-1。調(diào)用 .inc()產(chǎn)生一個隨機增量。通過傳遞 true 參數(shù)給done()，使進度條滿格，強制完成。
實際使用中，我們一般在Ajax或者Pjax加載時，調(diào)用NProgress。你可以在jQuery提供的Ajax，或者使用Pjax，或者在其他框架如Vue.js中都可以很好的使用NProgress。
這里我們示例演示使用Ajax方法請求遠程數(shù)據(jù)，然后調(diào)用進度條加載的過程。
以上代碼，當點擊按鈕#loading時，會調(diào)用NProgress.start()開始進度條加載動畫，并發(fā)送$.get請求遠程數(shù)據(jù)，直到返回數(shù)據(jù)后，NProgress.done()結(jié)束加載動畫。注意代碼使用了jQuery庫，所以你應(yīng)該先加載jQuery的最新庫文件。
這里為了讓效果更逼真，我特意將data.php中的代碼設(shè)置延遲2miao才響應(yīng)返回數(shù)據(jù)。當然實際開發(fā)中是真實的后端代碼執(zhí)行。
參數(shù)配置
minimum
設(shè)置開始時最低百分比，默認是0.08。
NProgress.configure({ minimum: 0.1 });
template
改變進度條的HTML結(jié)構(gòu)。為了保證進度條正常工作，需要一個包含role='bar' 屬性的元素。
ease和speed
ease可傳遞CSS3緩沖動畫字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed為動畫速度（默認200，單位ms）。
trickle
是否顯示進度條，默認：true
trickleSpeed
設(shè)置每次進度條步進速度（ms）。
showSpinner
是否顯示環(huán)形進度動畫，默認true。
parent
指定改變的父容器，默認body。
