pace.js页面加载进度条插件

pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求，事件循环滞后，文档就绪状态以及页面上的元素来确定进度。

官网

https://codebyzach.github.io/pace/

官方文档 https://codebyzach.github.io/pace/docs/

进度条样式支持自定义，官方也给出多个主题样式，详细官网查看各种主题

使用

默认是页面全部元素监听，也可以通过配置监听部分元素如下：

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }};

// 重新加载
btn.onclick=function(){
    Pace.restart();
 }
// 加载完成CallBack
 Pace.on('start',function(){
  console.log('start')
 })
  Pace.on('stop',function(){
  console.log('stop')
 })
 Pace.on('hide',function(){
  console.log('hide')
 })
 Pace.on('done',function(){
  console.log('done');
 })

cdn    

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace-theme-default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>