前端輕量級web進度條 – Nprogress & nanobar
前言
進度條庫是前端中常見的庫之一，bootstrap中提供了多種進度條樣式。NProgress.js和nanobar.js是兩款輕量級的進度條元件，使用簡便。軒楓閣用過Nprogress，用於頁面剛開啟時的頁面載入進度顯示。
官網
（1）NProgress
簡介
輕量級的ajax進度條應用，靈感來自Google, YouTube, and Medium。
納米級的進度條。 具有逼真的動畫涓涓細流來說服你的使用者，something is happen！
安裝
引入nprogress.js和nprogress.css到專案中。
基本用法
只需要呼叫start() 和 done()來控制進度條
NProgress.start();
NProgress.done();高階用法
百分比：通過設定progress的百分比，呼叫 .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();強制完成：通過傳遞 true 引數給done()，使進度條滿格，即使它沒有被顯示。
NProgressN .done(true);配置
minimum：設定最低百分比
NProgress.configure({ minimum: 0.1 });template：改變進度條的HTML結構。為保證進度條能正常工作，需要元素擁有role=’bar’屬性。
NProgress.configure({
template: "<div class='....'>...</div>"
});ease：調整動畫設定，ease可傳遞CSS3緩衝動畫字串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed為動畫速度（單位ms）。
NProgressN .configure({ ease: 'ease', speed: 500 });更多用法
.nanobar
簡介
非常非常輕量級的進度條，壓縮過後僅有730位元組。不需要引入jQuery。
相容性：IE8和the rest of the world
安裝
通過安裝包管理器安裝：
Bower:
$ bower install nanobarnpm:
$$ npm install nanobar使用
在專案中引入nanobar.js即可。
<<script src="path/to/nanobar.js"></script>進度的建立
var nanobar = new Nanobar( options );引數
bg <String>：（可選）CSS背景顏色屬性，預設為”#000″即黑色。
id <String>：（可選）nanobar的div的id
target <DOM Element>：設定防止進度條HTML程式碼的位置，若target為空則會固定到document的頂部位置。進度運動
nanobar.go(percentage)：調整進度
percentage ：nonabar的百分比，取值為0-100
例子
var options = {
bg: '#acf',
// leave target blank for global nanobar
target: document.getElementById('myDivId'),
// id for new nanobar
id: 'mynano'
};
var nanobar = new Nanobar( options );
//move bar
nanobar.go( 30 ); // size bar 30%
// Finish progress bar
nanobar.go(100);