最近看到Heo博客，发现了许多的两点，于是便去查找各种偏爱的地方，想着去实现它。偶然看到加载的时候，网页最上面会出现加载条便想着去实现它。

查看效果

具体效果查看本站

魔改教程

基础版

  1. 引入css
    1. 新建[BlogRoot]themes/butterfly/source/css/custom/progress_bar.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
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      /* This is a compiled file, you should be editing the file in the templates directory */
      .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: #e90f92;
          position: fixed;
          z-index: 2000;
          top: 0;
          right: 100%;
          width: 100%;
          height: 2px;
      }

      .pace .pace-progress-inner {
          display: block;
          position: absolute;
          right: 0px;
          width: 100px;
          height: 100%;
          box-shadow: 0 0 10px #e90f92, 0 0 5px #e90f92;
          opacity: 1.0;
          -webkit-transform: rotate(3deg) translate(0px, -4px);
          -moz-transform: rotate(3deg) translate(0px, -4px);
          -ms-transform: rotate(3deg) translate(0px, -4px);
          -o-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
      }

      .pace .pace-activity {
          display: block;
          position: fixed;
          z-index: 2000;
          top: 15px;
          right: 15px;
          width: 14px;
          height: 14px;
          border: solid 2px transparent;
          border-top-color: #e90f92;
          border-left-color: #e90f92;
          border-radius: 10px;
          -webkit-animation: pace-spinner 400ms linear infinite;
          -moz-animation: pace-spinner 400ms linear infinite;
          -ms-animation: pace-spinner 400ms linear infinite;
          -o-animation: pace-spinner 400ms linear infinite;
          animation: pace-spinner 400ms linear infinite;
      }

      @-webkit-keyframes pace-spinner {
          0% {
              -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
          }
          100% {
              -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
          }
      }

      @-moz-keyframes pace-spinner {
          0% {
              -moz-transform: rotate(0deg);
              transform: rotate(0deg);
          }
          100% {
              -moz-transform: rotate(360deg);
              transform: rotate(360deg);
          }
      }

      @-o-keyframes pace-spinner {
          0% {
              -o-transform: rotate(0deg);
              transform: rotate(0deg);
          }
          100% {
              -o-transform: rotate(360deg);
              transform: rotate(360deg);
          }
      }

      @-ms-keyframes pace-spinner {
          0% {
              -ms-transform: rotate(0deg);
              transform: rotate(0deg);
          }
          100% {
              -ms-transform: rotate(360deg);
              transform: rotate(360deg);
          }
      }

      @keyframes pace-spinner {
          0% {
              transform: rotate(0deg);
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(360deg);
              transform: rotate(360deg);
          }
      }

      /* 以下内容为自己添加 */
      /* 在下面修改进度条外观 */
      .pace .pace-progress {
          background: #1ef4fbec; /*进度条颜色*/
          height: 3px; /* 进度条厚度 */
      }

      .pace .pace-progress-inner {
          box-shadow: 0 0 10px #1ef4fbce, 0 0 5px #1ecffbd0; /*阴影颜色*/
      }

      .pace .pace-activity {
          border-top-color: #1edafbe5; /*上边框颜色*/
          border-left-color: #1ef4fbec; /*左边框颜色*/
      }
    2. 引入上述progress_bar.css文件：
      1
      2
      3
        inject:
          head:
      +      - <link href="/css/custom/progress_bar.css" rel="stylesheet">
    1
    2
    3
    inject:
      head:
    +    - <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
  2. 引入js文件
    1
    2
    3
    4
    inject:
      head:
      bottom:
        - <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

进阶版Heo版

  1. 新建[BlogRoot]themes/butterfly/source/css/custom/progress_bar.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
    }

  2. 在_config.butterfly.yml文件引入：

    1
    2
    3
    4
    5
    6
    7
    inject:
      head:
        # 引入顶部进度条
    +    - <link rel="stylesheet" href="/css/custom/progress_bar.css">
      bottom:
        # 引入顶部进度条js
    +    - <script src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>

Plus版本

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

  1. 新建[BlogRoot]themes/butterfly/source/css/custom/progress_bar.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
    .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%;
      }
    }

  2. 在_config.butterfly.yml文件引入：

    1
    2
    3
    4
    5
    6
    7
    inject:
      head:
        # 引入顶部进度条
        - <link rel="stylesheet" href="/css/custom/progress_bar.css">
      bottom:
        # 引入顶部进度条js
        - <script src="//npm.elemecdn.com/pace-js@1.2.4/pace.min.js"></script>

到此就结束了，需要改变样式了按照自己喜欢的在progress_bar.css文件中进行修改即可

备用引入

主要是为了防止挂掉！！！

备用 1

1
2
- <script async data-pjax src="https://static.slqwq.cn/script/pace-main.min.js"></script>
- <link rel=stylesheet href="https://static.slqwq.cn/styles/pace-theme-flash.min.css">

备用 2
1
2
- <script async data-pjax src="https://static-2.slqwq.cn/script/pace-main.min.js"></script>
- <link rel=stylesheet href="https://static-2.slqwq.cn/styles/pace-theme-flash.min.css">

备用 3
1
2
- <script async data-pjax src="https://static-3.slqwq.cn/script/pace-main.min.js"></script>
- <link rel=stylesheet href="https://static-3.slqwq.cn/styles/pace-theme-flash.min.css">

备用 4
1
2
- <script async data-pjax src="https://cdn1.tianli0.top/gh/slblog-github/Static@main/script/pace-main.min.js"></script>
- <link rel=stylesheet href="https://cdn1.tianli0.top/gh/slblog-github/Static@main/styles/pace-theme-flash.min.css">

备用 5
1
2
- <script async data-pjax src="https://cdn1.tianli0.top/gh/HCLonely/hclonely.github.io@1.4.7/js/custom/pace.min.js"></script>
- <link rel=stylesheet href="https://cdn1.tianli0.top/gh/HCLonely/hclonely.github.io@1.4.7/css/custom/pace-theme-flash.min.css">