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

准备工作

作者的主页：PACE

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

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

引入CDN加速

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

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