progress.js如何安裝使用

這篇文章給大家分享的是有關(guān)progress.js如何安裝使用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

　　Progressjs是個(gè)JavaScript和css3庫(kù)，幫助開(kāi)發(fā)者創(chuàng)建網(wǎng)頁(yè)上每個(gè)對(duì)象的管理進(jìn)度條。支持頁(yè)面元素、圖像、視頻、文本輸入等，用戶可以自定義進(jìn)度條模板，而且很方便使用。

　　progress.js安裝使用

　　//tosetprogress-barforwholepage

　　progressjs().start();

　　//orforspecificelement

　　progressjs("#targetElement").start();

　　progress.js的使用方法

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

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

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

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

　　你也可以...

　　添加到你調(diào)用Ajax的地方！綁定它到j(luò)QueryajaxStart和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});

感謝各位的閱讀！關(guān)于“progress.js如何安裝使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！