Fork me on GitHub

pace.js自动网页进度条插件使用说明

简介

pace.js是一个自动网页进度条插件,通过简单引用js和css文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码,自动检测进展。

使用说明

  1. 引入插件js和css主题文件

    1
    2
    3
    4
    <head>
    <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="https://cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
    </head>
  2. 修改主题颜色

    默认的是粉色的,如果要修改颜色可以在css中或者当前html中,增加以下样式代码,颜色样式可以自定义。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
    .pace .pace-progress {
    background: #1E92FB; /*进度条颜色*/
    height: 3px;
    }
    .pace .pace-progress-inner {
    box-shadow: 0 0 10px #1E92FB, 0 0 5px #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
    border-top-color: #1E92FB; /*上边框颜色*/
    border-left-color: #1E92FB; /*左边框颜色*/
    }
    </style>

效果图

参考资料

https://www.jianshu.com/p/f054333ac9e6

https://github.com/HubSpot/pace

FallSea wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!