jquery網頁載入進度條NProgress.js
阿新 • • 發佈：2019-01-27
NProgress.js是極細的納米級進度條，用現實的細線條動畫讓使用者看到網頁正在發生的事情！
你也許已經在 Youtube 上看過了那道紅色鐳射脈衝，它會在你切換頁面時出現。其實許多移動瀏覽器的進度條都是這個樣式，但是在網頁上實現可不多見。不過，有了 NProgress 這個 jQuery 外掛，你也可以輕鬆實現！
NProgress.js應用於複雜網頁的細長進度條。由 Google, YouTube, 和 Medium 提供靈感。
效果演示參考原部落格。
安裝
依賴於 jQuery (1.8版本及以上)，新增 nprogress.js 和 nprogress.css 到你的專案中。
使用方法
— 顯示進度條
—設定百分比
— 增加一點點
— 完成進度條
你也可以…
- 新增到你呼叫 Ajax 的地方！繫結它到 jQuery ajaxStart 和 ajaxStop 事件上
- 沒有 Turbolinks/Pjax 一樣可以製造一個美妙的進度條！把它繫結到 $(document).ready 和$(window).load
配置外掛
通過 minimum 來修改最小百分比。
NProgress.configure({ minimum: 0.1 });你可以通過 template 修改標記結構。為了保證進度條正常工作，需要一個包含 role=’bar’ 屬性的元素。
NProgress.configure({ template: "..." });
通過 ease(一個 CSS 中的 easing 值) 調整動畫設定和速度 speed （毫秒ms）。
NProgress.configure({ ease: 'ease', speed: 500 });
想關閉進度條步進？設定 trickle 為 false。
NProgress.configure({ trickle: false });
你可以調整 trickleRate (每次步進增長多少) 和 trickleSpeed (步進間隔，單位毫秒ms).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
想禁用進度環？設定 showSpinner 為 false。
NProgress.configure({ showSpinner: false });
轉載:http://www.wufangbo.com/nprogress-js/