Pace.js 网页加载自动显示进度条插件
在页面中引入 Pace.js，页面就会自动监测你的请求（包括 Ajax 请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。
此插件的兼容性很好，可以兼容 IE8 以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画效果）。
如果你擅长修改 CSS 动画，那你就可以做出无限种可能性的动画，为你的网站增添个性化特色！
安装方法
如果你会使用 Eager，通过点击下面的按钮安装 Pace.js 到你的网站中。
如果你喜欢源文件安装，你可以访问 Pace.js的官网 或者 Github地址，下载 Pace.js 的源文件，然后引入到你的网页中。
使用方法
首先引入 Pace.js 的插件 JS 文件和主题样式 CSS 文件。
<head> <script src="/pace/pace.js"></script> <link href="/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
自定义配置
Pace.js 会自动加载到页面中，不需要挂接到任何代码，会自动检测进度。如果你想做一些调整，你可以设置 window.paceOptions 来自定义配置：
paceOptions = {
// Disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}
你也可以将自定义设置放到 script 标签内例如：
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
如果你使用 AMD 或者 Browserify 来加载模块的话，你可以通过这样子来设置（例如：start）：
define(['pace'], function(pace){
pace.start({
document: false
});
});演示下载
基本上大致使用方法就这些，还有其他的一些方法的使用，各位就前往到官网去查看更加详细的介绍。希望这个插件可以帮助到大家！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论