前言

前几天看了HEO的博客，发现他改了改进度条：
ADF7797C-B628-460E-968F-13DB86BF615E
我的兴趣立刻提上来了，在百度上一番查询过后，发现了NProgress可以实现，然而很烦，于是又去Network里看了看，发现了个之前没注意到的好东西： Pace ,洪哥就是通过这个库实现的。

开始

基础版

直接上官方README里的cdn
在主题配置文件(config.yml)中加入该cdn

1
2
3
4
inject:
  head:
      - <script src="https://npm.elemecdn.com/[email protected]/pace.min.js"></script>
      - <link rel="stylesheet" href="https://npm.elemecdn.com/[email protected]/pace-theme-default.min.css">

你就可以收获一个像这样的加载条：
09D4D5FE-2B1C-486C-B677-C533EC19605D

进阶版本 (来自HEO)

此方法效果类比HEO，见前言
在{blogSource}/themes/butterfly/source/css/新建一个文件load.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 4rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden
}

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

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
    animation: gradient 2s ease infinite;
    background-size: 200%
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}

主题文件中加入
1
2
3
4
inject:
  head:
      - <script src="https://npm.elemecdn.com/[email protected]/pace.min.js"></script>
      - <link rel="stylesheet" href="/css/load.css">

Plus版本(动态渐变色)

注意，此版本适用于加载较慢者！！！否则根本来不及显示动效，且会消耗用户的硬件资源，影响体验！使用前请谨慎考虑！

效果可以去这篇测试文章查看: 标签外挂
在{blogSource}/themes/butterfly/source/css/新建一个文件load.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 4rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden
}

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

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: gradient 1.5s ease infinite;
    background-size: 200%
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


主题文件中加入
1
2
3
4
inject:
  head:
      - <script src="https://npm.elemecdn.com/[email protected]/pace.min.js"></script>
      - <link rel="stylesheet" href="/css/load.css">

Complete!