IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Butterfly美化——Progress Bar

    JayHrn发表于 2023-12-19 09:35:28
    love 0

    最近看到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">



沪ICP备19023445号-2号
友情链接