给网页顶部添加加载进度条

源码分享 · 04-08 11:21

想不想让用户的等待时间变得更加有趣?本文将教你在网页顶部添加一个加载进度条,让用户的等待时间不再无聊。通过这个小小的改变,你可以大大提升用户体验,让网站更具吸引力。快来学习一下吧!

效果展示

点我查看效果

源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页加载进度条</title>
<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" />
<style>
.pace {
    z-index:999;
    pointer-events:none;
    user-select:none;
    z-index:2;
    position:fixed;
    margin:auto;
    top: 5px;
    left:0;
    right:0;
    height: 12px;
    border-radius:8px;
    width: 8rem;
    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%
}
</style>
</head>
<body>
<br>
请按下 Ctrl + F5 或 F5 刷新您的网页!

</body>
</html>

实现原理

该方法通过在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。

写在最后

如果上面的源代码失效,请将源代码 head 标签之内的代码替换为以下代码之一即可:

<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>

或者

<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" />

完!

Typecho 特效 组件 优化 源码分享

上一篇 : 给网页顶部添加轮播图

下一篇 : 使用CDN后无法获取真实IP地址解决方案


  1. HowieHz   Lv1
    06-18 12:50 第3楼 中国上海市移动Windows 10 · Google Chrome

    感觉加了更慢了哈哈

    1. 刘郎   博主
      06-18 12:53 第4楼 中国贵州省移动Windows 10 · QQ Browser
      @HowieHz

      其实都是差不多的 只是视觉效果而已 再者优化一下速度就上来了

  2. 小A   访客
    04-08 14:26 第1个脚印 中国广东省深圳市电信Windows 10 · Google Chrome

    你的加上没有?我感觉套上CF后没有直接访问那么快了

    1. 刘郎   博主
      04-08 14:29 第2楼 中国移动iPhone · Safari
      @小A

      没有加。不影响访问速度的😂,做一下优化速度就上来了

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 5 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力