在页面中引入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%
}
最新评论
我现在基本都不是用QQ了,电脑没装,手...
我成为了范例 😃
看起来很完美。
1ro.cn 还收不,怎么联系不到人
你的feed貌似有点问题。你看下。`v...
哈哈哈,路过。看到了