Pace 将自动监视您的 Ajax 请求,事件循环滞后,文档就绪状态以及页面上的元素,以决定进度。

如果使用 AMD 或 Browserify,则需要 step.js 并 pace.start() 在加载过程中尽早进行调用。

Pace 主题

主题使用

在主题下的 _config.yml 文件中

1
2
3
4
5
6
7
inject:
head:
...
- <link rel="stylesheet" href="/realwds/realwds.css">
bottom:
...
- <script src="https://cdn.jsdelivr.net/gh/CodeByZach/pace@1.2.3/pace.min.js"></script>

在 realwds.css 文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none
}

.pace-inactive .pace-progress {
opacity: 0;
transition: .3s
}

.pace .pace-progress {
background: #4584ff;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 3px
}