在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。

准备工作

作者的主页：PACE

在head标签之内引入相对应的JS和CSS

1
2
3
4
<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加速

这里引用：字节跳动静态资源公共库 ，也可以使用其他的加速源。

1
2
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace.min.js" type="application/javascript"></script>
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/pace/1.2.4/pace-theme-default.min.css" type="text/css" rel="stylesheet" />

美化加载效果

看见来自Butterfly加载魔改效果，就把扒下来了。

食用方法，新建一个pace.css文件，然后在网页进行引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.pace {
	z-index:999;
	pointer-events:none;
	user-select:none;
	z-index:2;
	position:fixed;
	margin:auto;
	top:4px;
	left:0;
	right:0;
	height:8px;
	border-radius:8px;
	width:6rem;
	background:#eaecf2;
	overflow:hidden
}
.pace-inactive .pace-progress {
	opacity:0;
	transition:.3s ease-in
}
.pace.pace-inactive {
	opacity:0;
	transition:.3s;
	top:-8px
}
.pace .pace-progress {
	box-sizing:border-box;
	transform:translate3d(0,0,0);
	position:fixed;
	z-index:999;
	display:block;
	position:absolute;
	top:0;
	right:100%;
	height:100%;
	width:100%;
	background:#49b1f5;
	background:linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
	animation:gradient 2s ease infinite;
	background-size:200%
}