Pace快速上手教程：仅3行代码，给你的网站加上自动加载进度条-港品优选

Pace快速上手教程：仅3行代码，给你的网站加上自动加载进度条

【免费下载链接】paceAutomatically add a progress bar to your site.项目地址: https://gitcode.com/gh_mirrors/pa/pace

Pace 是一款自动加载进度条插件（npm 包名pace-js），只需在页面<head>中引入 pace.min.js 和任意一个主题 CSS，它就能自动监测 Ajax 请求、事件循环阻塞、文档就绪状态和页面元素，为你展示一条平滑的加载进度条，全程零依赖、无需手动计算进度。

🚀 快速安装：3行代码完成接入

下载两个文件

整个库非常轻量，pace.min.js 压缩后仅 4KB（gzip 后），你只需要两个文件：

核心脚本：pace.min.js
主题样式：pace-theme-default.min.css

在 head 中引入

把下面这几行放在<head>里（README 官方示例就是如此）：

<head> <script src="pace.min.js"></script> <link rel="stylesheet" href="pace-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 rel="stylesheet" href="themes/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.paceOptions：

paceOptions = { 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），仅供参考

企业官网建设流程全解析