Pace快速上手教程仅3行代码给你的网站加上自动加载进度条【免费下载链接】paceAutomatically add a progress bar to your site.项目地址: https://gitcode.com/gh_mirrors/pa/pacePace 是一款自动加载进度条插件npm 包名pace-js只需在页面head中引入 pace.min.js 和任意一个主题 CSS它就能自动监测 Ajax 请求、事件循环阻塞、文档就绪状态和页面元素为你展示一条平滑的加载进度条全程零依赖、无需手动计算进度。 快速安装3行代码完成接入下载两个文件整个库非常轻量pace.min.js 压缩后仅 4KBgzip 后你只需要两个文件核心脚本pace.min.js主题样式pace-theme-default.min.css在 head 中引入把下面这几行放在head里README 官方示例就是如此head script srcpace.min.js/script link relstylesheet hrefpace-theme-default.min.css /head就这么简单——没有构建、没有依赖、不需要写一行 JavaScript。Pace 会自动启动并开始监控页面加载。 如果你使用 AMD 或 Browserify则改为require引入并在加载流程尽早调用Pace.start()即可。⚙️ 它如何判断进度4个自动采集器Pace 的核心思路是多源汇总默认内置了 4 个采集器Collectors分别负责采集器作用Ajax监听页面上所有 Ajax 请求Elements检测特定元素是否已渲染到页面Document读取文档readyState就绪状态Event Lag检测事件循环延迟反映 JS 执行压力Pace 会自动把这几路信号缩放合并让进度变化看起来平滑自然。每个采集器都可以用同名选项单独关闭或微调默认值定义在 pace.js 的defaultOptions中。 换肤指南10种颜色 × 15种样式仓库 themes/ 目录下自带 10 个配色方案black、blue、green、orange、pink、purple、red、silver、white、yellow每个方案又提供 15 种不同动效样式只需替换 CSS 引用即可换肤。比如想要一个红色圆角进度条link relstylesheet hrefthemes/red/pace-theme-loading-bar.css其他值得一试的样式顶部细线默认pace-theme-default.css居中圆圈themes/purple/pace-theme-center-circle.css弹跳圆点themes/blue/pace-theme-bounce.css角落指示器themes/orange/pace-theme-corner-indicator.css极简风格themes/green/pace-theme-minimal.css源码模板存放在 templates/ 目录方便你基于它二次定制。 常用配置项速查想在加载流程中做微调只需在引入脚本之前设置window.paceOptionspaceOptions { minTime: 500, // 进度条最短展示 500ms避免一闪而过 ghostTime: 200, // 完成后幽灵时间让收尾更从容 restartOnRequestAfter: 300, // 超过 300ms 的 Ajax 请求触发重启 elements: { selectors: [.main-content] // 等主内容出现再算加载完成 } };也可以直接写在 script 标签上script>Pace.on(hide, function() { // 页面完全就绪可以执行入场动画 });✅ 上手清单下载 pace.min.js 和任意主题 CSS 到项目静态目录在head中尽早引入这两个文件按需设置paceOptions微调行为单页应用确认restartOnPushState开启让路由切换也有进度反馈兼容性方面Pace 支持 IE8标准模式、Firefox 3.5、Chrome、Safari 4、Opera 10.5 及所有现代移动浏览器可以放心用于生产环境。许可证为 MIT详见 LICENSE。现在去试试把进度条加到你的网站上吧加载体验立刻上一个档次【免费下载链接】paceAutomatically add a progress bar to your site.项目地址: https://gitcode.com/gh_mirrors/pa/pace创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考