烏迪爾 ! 小哈花了一分鐘就給博客添加了頁面加載進度條 !

點擊關注公眾號，Java干貨及時送達

下載進度條往回走_文件下載的進度條_js下載文件帶進度條

大家好，我是小哈~

最近在瀏覽別人博客的時候，發現很多大佬博客頁面頂部都有個加載進度條動畫，挺好看滴，于是乎，想給給自己的博客整個，提升一下逼格~

下載進度條往回走_js下載文件帶進度條_文件下載的進度條

說干就干，咱后端的最頭疼的就是前端了，好在這種功能一般都有現成的 JS 插件，開箱即用，也非常方便。一番調研后，發現 Pace.js 這個插件就非常 nice，集成起來也簡單，先看下集成后的 demo 演示圖：

js下載文件帶進度條_文件下載的進度條_下載進度條往回走

pace.js 頁面加載進度條演示

效果還不賴，有木有~ 接下來說下如何在你的頁面中集成 Pace.js 插件實現頁面加載進度條的功能。

什么是 Pace.js

官方說明如下：

您無需編寫任何代碼，只需在頁面中添加 Pace.js 以及主題 css, 此插件會自動檢測頁面加載進度并實現頁面進度條效果。

值得注意的是，Pace.js 監聽的請求還包括 ajax 請求，在事件循環滯后，會在頁面記錄加載的狀態以及進度情況。

官方訪問地址：

開始使用

<head>
????<script?src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js">script>
????<link?rel="stylesheet"?href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
head>

這里，小哈更推薦用國內的 CDN 開源庫，國內訪問加載速度會更快一些，比如 BootCDN, 集成代碼如下：

<head>
????<script?src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js">script>
?<link?href="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace-theme-default.css"?rel="stylesheet">
head>

自定義樣式

需要注意的是 pace-theme-default.css 這個樣式文件，它是官方提供的默認進度條樣式，效果 GIF 在文章開頭已經放出來了，是一個紅色的加載進度條樣式。

進度條顏色

js下載文件帶進度條_下載進度條往回走_文件下載的進度條

如果你覺得和自己的網站主色調不搭，想要個性化定制，要怎么辦呢？官網頁面提供了工具，輸入指定顏色的 RGB 數值，然后下載該 CSS 文件即可。

下載進度條往回走_文件下載的進度條_js下載文件帶進度條

Pace.js 自定義頁面加載進度條顏色進度條動畫

除了可以自定義進度條的顏色以外，官網還提供了 14 種動畫可供選擇，可根據自己喜好下載對應的 CSS 文件。

文件下載的進度條_js下載文件帶進度條_下載進度條往回走

Pace.js 主題截圖1

文件下載的進度條_js下載文件帶進度條_下載進度條往回走

Pace.js 主題截圖2

下載進度條往回走_文件下載的進度條_js下載文件帶進度條

Pace.js 主題截圖3自定義更炫酷的樣式

如果你擅長 CSS 動畫，你也可以自己手動編寫來做出更多炫酷的動畫，為您的網站增添更多個性化特色。

替換掉默認的加載進度條 CSS

替換掉默認的加載進度條樣式也非常簡單，將 pace-theme-default.css 替換成下載好的 CSS 文件即可，JS 文件不用動，大致如下：

<head>
????<script?src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js">script>
?<link?href="custom-theme.css"?rel="stylesheet">
head>

自定義配置 Pace.js

如果你想對 Pace.js 做一些特殊的調整，可以設置 window.來自定義配置：

?paceOptions?=?{
??//?Disable?the?'elements'?source
??elements:?false,
??
??//?Only?show?the?progress?on?regular?and?ajax-y?page?navigation,
??//?not?every?request
??restartOnRequestAfter:?false
??}

還可以將自定義設置放到 script 標簽內，例如：

<script?data-pace-options='{?"ajax":?false?}'?src='pace.js'>script>

如果你使用 AMD 或者來加載模塊的話，你可以通過如下實例代碼來設置（例如：start）：

js下載文件帶進度條_文件下載的進度條_下載進度條往回走

define(['pace'],?function(pace){
??pace.start({
????document:?false
??});
});

Pace.js 公開的 API 列表

API說明

Pace.start

開始顯示進度條，如果你不是使用AMD或者來加載模塊的話，這個會默認執行。

Pace.restart

進度條重新加載以及顯示

Pace.stop

隱藏進度條以及停止加載。

Pace.track

監測一個或者多個請求任務。

Pace.ignore

忽略一個或者多個請求任務。

更多 Pace.js 方法詳見官網。

上手試試

小哈這里通過 Spring Boot+ + 搭建了一個演示 Demo, 效果如下：

js下載文件帶進度條_文件下載的進度條_下載進度條往回走

pace.js 頁面加載進度條演示

代碼地址：

在線咨詢

上一篇：計算機網絡的三大功能有哪些？
下一篇：軟件界面設計工具有哪些

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

烏迪爾 ! 小哈花了一分鐘就給博客添加了頁面加載進度條 !

您的項目需求