pace.min.js监听ajax,使用pace.js在页面顶部添加加载进度条

很多网站(如Github,Stackoverflow)在加载页面时，页面的顶部会看到页面加载进度条。使用pace.js可以很简单的实现此功能。

下载pace.js

要求

尽量把pace.js以及主题的css文件放在页面head标签的前面，这是因为pace.js会监控页面的元素，异步请求等，我们需要提早加载pace。

最少代码使用

使用pace只需要在页面添加pace.js和相应的进度条样式的css:

我们是要在顶部添加类似边界线的进度条，使用的是minimal主题。

pace-theme-minimal.css全部代码如下：

.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: #2299dd;

position: fixed;

z-index: 2000;

top: 0;

right: 100%;

width: 100%;

height: 2px;

}

把.pace .pace-progress的background改为你自己的颜色即可。pace-theme-minimal.css的代码很少，建议吧这段代码添加到页面的style里。<