JS進度加載條效果

一、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);

二、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(); });

三、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