在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。
准备工作
作者的主页：PACE
在head标签之内引入相对应的JS和CSS
<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加速
这里引用：字节跳动静态资源公共库 ，也可以使用其他的加速源。
<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文件，然后在网页进行引入。
.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%
}
评论