整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
点击关注公众号，Java干货及时送达
大家好，我是小哈~
最近在浏览别人博客的时候，发现很多大佬博客页面顶部都有个加载进度条动画，挺好看滴，于是乎，想给给自己的博客整个，提升一下逼格~
说干就干，咱后端的最头疼的就是前端了，好在这种功能一般都有现成的 JS 插件，开箱即用，也非常方便。一番调研后，发现 Pace.js 这个插件就非常 nice，集成起来也简单，先看下集成后的 demo 演示图：
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 在文章开头已经放出来了，是一个红色的加载进度条样式。
进度条颜色
如果你觉得和自己的网站主色调不搭，想要个性化定制，要怎么办呢？官网页面提供了工具，输入指定颜色的 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 = {
// 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）：
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, 效果如下：
pace.js 页面加载进度条演示
代码地址：
*请认真填写需求信息，我们会在24小时内与您取得联系。
