想不想让用户的等待时间变得更加有趣？本文将教你在网页顶部添加一个加载进度条，让用户的等待时间不再无聊。通过这个小小的改变，你可以大大提升用户体验，让网站更具吸引力。快来学习一下吧！
效果展示
源代码
<!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" />完！
感觉加了更慢了哈哈
其实都是差不多的 只是视觉效果而已 再者优化一下速度就上来了
你的加上没有？我感觉套上CF后没有直接访问那么快了
没有加。不影响访问速度的😂，做一下优化速度就上来了