如何给自己的网页添加类似于 Youtube 一样的顶部加载进度条，通过pace.js添加是一个比较简便且实现效果不错的方法，下面就看看要如何操作吧。
第1步 引入 pace.js
可进入pace.js的官网下载文件到本地，或者直接通过 CDN 引入网页，国内可使用字节跳动CDN镜像链接。
示例
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
官方CDN镜像
https://raw.githubusercontent.com/CodeByZach/pace/master/pace.min.js
字节跳动CDN镜像
https://s2.pstatp.com/cdn/expire-1-M/pace/1.0.2/pace.min.js
创建独立的JavaScript文件并引入页面，内容如下。
define(['pace'], function(pace){
pace.start({
document: false
});
});
第2步 添加样式
可直接在页面head中添加默认样式，也可创建独立的.css文件引入页面。
<style>
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #29d;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
</style>
通过修改样式表中 .pace .pace-progress的background和height属性可改进度条的颜色和宽度，已适应自己的页面风格。也可为其添加box-shadow属性来实现阴影。下面是我自定义的风格供大家参考。
.pace .pace-progress {
background: #2299dd;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 3px;
box-shadow: 0 0 3px #2299dd;
}
不仅是类似 Youtube 的顶部横条的样式，官方还提供了很多其他的样式，更多详情可阅读官方文档。
