DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery插件NProgress.js制作網頁加載進度條
jquery插件NProgress.js制作網頁加載進度條
編輯:JavaScript綜合知識     

   這篇文章主要介紹了jquery插件NProgress.js制作網頁加載進度條的相關資料,需要的朋友可以參考下

  NProgress.js是極細的納米級進度條,用現實的細線條動畫讓用戶看到網頁正在發生的事情!

  你也許已經在 Youtube 上看過了那道紅色激光脈沖,它會在你切換頁面時出現。其實許多移動浏覽器的進度條都是這個樣式,但是在網頁上實現可不多見。不過,有了 NProgress 這個 jQuery 插件,你也可以輕松實現!

  NProgress.js應用於復雜網頁的細長進度條。由 Google, YouTube, 和 Medium 提供靈感。

  安裝

  依賴於 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的項目中。

  使用方法

  NProgress.start() — 顯示進度條

  NProgress.set(0.4) —設置百分比

  NProgress.inc() — 增加一點點

  NProgress.done() — 完成進度條

  你也可以…

  添加到你調用 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 });

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved