首页
/ 正文

Pace.js 实现页面加载进度条 (步骤超简单)

更新时间: 2022-03-07 11:33:28

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2800+ 小伙伴加入学习，欢迎点击围观

大家好，我是小哈 ~

最近在浏览别人博客的时候，发现很多页面顶部有个加载进度条动画，挺好看滴，于是乎，想给给自己的博客整个，提升一下逼格 ~

说干就干，咱后端的最头疼的就是前端了，好在这种功能一般都有现成的 JS 插件，开箱即用，也非常方便。一番调研后，发现 Pace.js 这个插件就非常 nice，集成起来也简单，先看下集成后的 demo 演示图：

pace.js 页面加载进度条演示

效果还不赖，有木有 ~ 接下来说下如何在你的页面中集成 Pace.js 插件实现页面加载进度条的功能。

什么是 Pace.js

官方说明如下：

您无需编写任何代码，只需在页面中添加 Pace.js 以及主题 css, 此插件会自动检测页面加载进度并实现页面进度条效果。

值得注意的是，Pace.js 监听的请求还包括 ajax 请求，在事件循环滞后，会在页面记录加载的状态以及进度情况。

官方访问地址：

https://codebyzach.github.io/pace/

开始使用

<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 在文章开头已经放出来了，是一个红色的加载进度条样式。

进度条颜色

如果你觉得和自己的网站主色调不搭，想要个性化定制，要怎么办呢？官网页面提供了工具，输入指定颜色的 RGB 数值，然后下载该 CSS 文件即可。

Pace.js 自定义页面加载进度条颜色

进度条动画

除了可以自定义进度条的颜色以外，官网还提供了 14 种动画可供选择，可根据自己喜好下载对应的 CSS 文件。

Pace.js 主题截图 1

Pace.js 主题截图 2

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 来自定义配置：

 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 或者 Browserify 来加载模块的话，你可以通过如下实例代码来设置（例如：start）：

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

Pace.js 公开的 API 列表

API	说明
Pace.start	开始显示进度条，如果你不是使用 `AMD` 或者 `Browserify` 来加载模块的话，这个会默认执行。
Pace.restart	进度条重新加载以及显示
Pace.stop	隐藏进度条以及停止加载。
Pace.track	监测一个或者多个请求任务。
Pace.ignore	忽略一个或者多个请求任务。

更多 Pace.js 方法详见官网。

上手试试

小哈这里通过 Spring Boot+ Freemarker + Bootstrap5 搭建了一个演示 Demo, 效果如下：

pace.js 页面加载进度条演示

Demo 代码地址：

关注博主公众号 小哈学 Java 回复关键词 pace 即可获取哟 ~

结语

水文结束，不过有一说一，如果你想给自己的博客加个页面加载进度条，Pace.js 这款插件还是值得推荐的，集成起来也非常简单，最终呈现的效果也很棒，安利 ~

Ref

https://codebyzach.github.io/pace/
https://www.jianshu.com/p/eef1c199dff5
https://www.jiawin.com/p/3928