pace.js和NProgress.js兩個加載進度插件的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“pace.js和NProgress.js兩個加載進度插件的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“pace.js和NProgress.js兩個加載進度插件的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網站制作、做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的覃塘網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

NProgress.js

NProgress是基于jquery的，且版本要 >1.8

API:

 　　　　NProgress.start() — 啟動進度條
　　　　NProgress.set(0.4) — 將進度設置到具體的百分比位置
　　　　NProgress.inc() — 少量增加進度
　　　　NProgress.done() — 將進度條標為完成狀態(tài)

引入：

 
//還有jquery要引入進來

使用：

自定義動畫樣式：

將我們定義的樣式寫到一個script標簽里，這算是一個小技巧吧。

這是css

html,body,iframe{
 margin: 0;
 padding: 0;
}
#nprogress{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f7f7f7;
 z-index: 999;
}
.spinner-icon{
 display: none!important;
}
.splash {
 position:absolute;
 top:40%;
 left:0;
 right:0;
 margin: auto;
 }
 .splash img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 width: 100px;
 }
 .card {
 background-color: #f7f7f7;
 padding: 20px 25px 15px;
 margin: 0 auto 25px;
 width: 380px;
 }
 .mybar {
 background: #29d;
 height:10px;
 }
 .progress {
 height: 10px;
 overflow: hidden;
 }

js代碼變成了這樣：

總結：在js里控制動畫什么時候開始，什么時候結束，已及加載的動畫樣式。

在自定義樣式里關鍵的兩個指針就是  role 屬性：

role=bar ：橫向加載條

role=spinner 旋轉的小圈　　

樣例2：（省略了css）

pace.js：

API：　　

Pace.start：開始顯示進度條，如果你不是使用AMD或者Browserify來加載模塊的話，這個會默認執(zhí)行。
Pace.restart：進度條重新加載以及顯示。
Pace.stop：隱藏進度條以及停止加載。
Pace.track：監(jiān)測一個或者多個請求任務。
Pace.ignore：忽略一個或者多個請求任務。 

用法：　　　　

改變動畫樣式：

pace里已經設計好了許多種加載進度動畫，只需要變化css文件就可以了

以上是“pace.js和NProgress.js兩個加載進度插件的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：pace.js和NProgress.js兩個加載進度插件的示例分析-創(chuàng)新互聯(lián)
地址分享：http://m.jiaotiyi.com/article/ddjgod.html