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

发表于 分类于 阅读次数： 本文字数： 224 阅读时长 ≈ 1 分钟

简介

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>
  1. 修改主题颜色

    默认的是粉色的，如果要修改颜色可以在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