NProgress.js是極細(xì)的納米級(jí)進(jìn)度條，用現(xiàn)實(shí)的細(xì)線條動(dòng)畫讓用戶看到網(wǎng)頁(yè)正在發(fā)生的事情！

你也許已經(jīng)在 Youtube 上看過(guò)了那道紅色激光脈沖，它會(huì)在你切換頁(yè)面時(shí)出現(xiàn)。其實(shí)許多移動(dòng)瀏覽器的進(jìn)度條都是這個(gè)樣式，但是在網(wǎng)頁(yè)上實(shí)現(xiàn)可不多見(jiàn)。不過(guò)，有了 NProgress 這個(gè) jQuery 插件，你也可以輕松實(shí)現(xiàn)！

NProgress.js應(yīng)用于復(fù)雜網(wǎng)頁(yè)的細(xì)長(zhǎng)進(jìn)度條。由 Google, YouTube, 和 Medium 提供靈感。

安裝

依賴于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的項(xiàng)目中。

使用方法

NProgress.start() — 顯示進(jìn)度條

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

NProgress.inc() — 增加一點(diǎn)點(diǎn)

NProgress.done() — 完成進(jìn)度條

你也可以…
添加到你調(diào)用 Ajax 的地方！綁定它到 jQuery ajaxStart 和 ajaxStop 事件上
沒(méi)有 Turbolinks/Pjax 一樣可以制造一個(gè)美妙的進(jìn)度條！把它綁定到 $(document).ready 和$(window).load

配置插件

通過(guò) minimum 來(lái)修改最小百分比。

NProgress.configure({ minimum: 0.1 });

你可以通過(guò) template 修改標(biāo)記結(jié)構(gòu)。為了保證進(jìn)度條正常工作，需要一個(gè)包含 role='bar' 屬性的元素。

NProgress.configure({ template: "..." });

通過(guò) ease(一個(gè) CSS 中的 easing 值) 調(diào)整動(dòng)畫設(shè)置和速度 speed （毫秒ms）。

NProgress.configure({ ease: 'ease', speed: 500 });

想關(guān)閉進(jìn)度條步進(jìn)？設(shè)置 trickle 為 false。

NProgress.configure({ trickle: false });

你可以調(diào)整 trickleRate (每次步進(jìn)增長(zhǎng)多少) 和 trickleSpeed (步進(jìn)間隔，單位毫秒ms).

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

想禁用進(jìn)度環(huán)？設(shè)置 showSpinner 為 false。

NProgress.configure({ showSpinner: false });

在線演示 http://ricostacruz.com/nprogress/

源碼下載 https://github.com/rstacruz/nprogress

最新評(píng)論