钧言极客站钧言极客

钧言极客

使用 pace.js 为网页添加加载进度条

在页面中引入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%
}
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《使用 pace.js 为网页添加加载进度条》
文章链接:https://www.jinjun.top/448.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论