JS進度加載條效果

1、NProgress.js

這是一個基於JQuery的插件，輕量級的ajax進度條應用。

// 通過clone文件下來，導出NProgress.css和NProgress.js文件
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

// 或者NPM
npm install --save nprogress

// 或者CDN
https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css

// 進度條開始結束
NProgress.start();
NProgress.done();

// 百分比：通過設置progress的百分比，調用 .set(n)來控制進度，其中n的取值范圍為0-1
NProgress.set(0.0);

2、Pace.js

這是一個非常有意思的加載框架

參考文獻

// 通過clone文件下來，導出Pace.js文件，和在themes文件夾中選擇一種loading動畫效果
// 在head里面引入文件,引入即可，無需再配置其他
<link rel="stylesheet" href="/pace/themes/blue/pace-theme-center-atom.css">
<script src="/pace/pace.js"></script>
    
// 自定義配置
paceOptions = {
    ajax: false, // disabled
    document: false, // disabled
    eventLag: false, // disabled
    elements: {
    selectors: ['.mytest']
  }
};

// API
Pace.start：開始顯示進度條，如果你不是使用AMD或者Browserify來加載模塊的話，這個會默認執行。
Pace.restart：進度條重新加載以及顯示。
Pace.stop：隱藏進度條以及停止加載。
Pace.track：監測一個或者多個請求任務。
Pace.ignore：忽略一個或者多個請求任務

// 調用API
Pace.on('event', 'fu()')
    
// 重新加載
Pace.restart()
    
// pace.js進度條插件無法通過ajax啟動的解決辦法
$(document).ajaxStart(function() { Pace.restart(); });

3、Nanobar.js

非常非常輕量級的進度條，壓縮過后僅有730字節。不需要引入jQuery

npm install nanobar

// 引入
<script src="path/to/nanobar.js"></script>
    
// 啟動
var nanobar= new Nanobar(options);

// options參數
var options = {
    	bg <String>：（可選）CSS背景顏色屬性，默認為”#000″即黑色。
		id <String>：（可選）nanobar的div的id
		target <DOM Element>：設置防止進度條HTML代碼的位置，若target為空則會固定到document的頂部位置
	}

// 進度運動
nanobar.go(percentage)：調整進度
percentage <Number>：nonabar的百分比，取值為0-100