angularjs pace.js 进度条

angularjs pace.js 进度条

先npm 安装pace.js

使用

import 'pace-progress/themes/blue/pace-theme-material.css'; // 自定义进度条的样式
// import 'pace-progress/themes/blue/pace-theme-center-circle.css';

import * as Pace from 'pace-progress';

Pace.options.shouldHandlePushState = (prevUrl, newUrl) => {
  // Show pace progress bar only if URL path changed; when query params
  // or hash changed - ignore that history event
  const [prevPrefix] = prevUrl.split('?');
  const [newPrefix] = newUrl.split('?');
  return prevPrefix !== newPrefix;
};
// add ignore url about 'get_server_information'
Pace.options.ajax.ignoreURLs.push('api/url1');
Pace.options.ajax.ignoreURLs.push('/api/url2');
    <script>
      window.paceOptions = {
    document: true, // disabled
    eventLag: true,
    restartOnPushState: true,
    restartOnRequestAfter: true,
    ajax: {
        trackMethods: ['POST', 'GET', 'DELETE', 'PUT']
    }
};
    </script>
    <style>
      .pace .pace-progress {
        color: #2196F3 !important;
        top: 50vh !important;
        background: unset !important;
      }
    </style>

右下角对话与我联系。


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×