pace.js和NProgress.js如何使用載入進度外掛（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

pace.js和NProgress.js如何使用載入進度外掛（詳細教學）

亚连

Jun 08, 2018 pm 05:24 PM

載入進度

這兩個外掛程式都是關於載入進度動畫的，今天就和大家一起了解下pace.js和NProgress.js兩個載入進度外掛的一點小總結，有興趣的朋友一起看看吧

這兩個外掛都是關於載入進度動畫的，應該說各有特色吧，最起碼對我來說是各有優勢的。今天一天就搗鼓了加載進度動畫，也研究了大量的（也就這兩個）加載進度動畫，也算對加載進度動畫有了一個初步的了解了吧。

NProgress.js

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

API:

　　　　NProgress.start() — 啟動進度條
　　　　NProgress.set(0.4) — 將進度設定到特定的百分比位置
　　　　NProgress.inc() — 少量增加進度
　　　　NProgrogress.done — 少量增加進度

　　　　NProgrogress.done() — 將狀態標. ##引入：

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来

登入後複製

使用：

<script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
 　　NProgress.done();
 });
</script>

登入後複製

自訂動畫樣式：

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

<script type="text" id="myId"><br>　　<p class="splash card"><br> 　　<p class="lead" style="text-align:center">不要回来，马上走开...</p>
　　 <p class="progress">
 　　<p class="mybar" role="bar">
 　　</p>
 　　</p>
</p><br></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程式碼變成了這樣：

<script type="text/javascript">
 $(function(){
  NProgress.configure({
  template: $(&#39;#myId&#39;).html() // template是用来设置动画样式的属性
  });
  NProgress.start();
 });
 $(window).load(function(){
  NProgress.done();
 })
 </script>

登入後複製

總結：在js裡控制動畫什麼時候開始，什麼時候結束，已及載入的動畫樣式。

在自訂樣式裡關鍵的兩個指標就是 role 屬性：

role=bar ：橫向載入條

role=spinner 旋轉的小圈

範例2：（省略了css）

<script type="text" id="myId">
　　<em id="__mceDel"><em id="__mceDel"><p class="bar" role="bar" style="display=block"><br>　　　　<p class="peg"></p><br>　　</p><br>　　<p class="spinner" role="spinner"><br>　　　　<p class="spinner-icon"></p><br>　　</p></em></em>
</script>

登入後複製

pace.js：

API：　　

Pace.start：開始顯示進度條，如果你不是使用AMD或是Browserify來載入模組的話，這個會預設執行。

Pace.restart：進度條重新載入以及顯示。
Pace.stop：隱藏進度條以及停止載入。
Pace.track：監控一個或多個請求任務。
Pace.ignore：忽略一個或多個請求任務。

用法：　　　　

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br>　　<!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>

登入後複製

改變動畫樣式：

pace裡已經設計好了許多種載入進度動畫，只需要變化css檔案就可以了

#總結：

pace的優點有直接引入檔案就可以了，不需要在自己寫任何程式碼，就自帶了載入進度動畫，只是有一個缺點，官網提供的載入進度動畫都沒有遮罩層。

當然，可以自己設定（我不會）；

上面是我整理給大家的，希望今後會對大家有幫助。

在vue.js中如何使用ajax渲染頁面

ajax請求vue.js渲染頁面載入

如何解決Vue.js顯示資料的時,頁面閃現#

以上是pace.js和NProgress.js如何使用載入進度外掛（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7725

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。