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

大家好,我是小哈 ~

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

说干就干,咱后端的最头疼的就是前端了,好在这种功能一般都有现成的 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