做法一：把动画和真实加载进度绑在一起（Vue 或 React，需要 Pro）
Vue 和 React 组件有一个 progress 参数，取值 0 到 100。传入后，粒子只移动到这个进度对应的位置，加载完成（100）时 Logo 正好成形。
import { PixelLogoLoader } from './components/PixelLogoLoader';
// progress: 0 to 100, from your own loading steps
<PixelLogoLoader progress={progress} height={360} />完整的加载步骤和状态管理代码在教程里：Vue 3 教程的“做成加载页”和React 教程的“做成加载页”。
做法二：把免费的 HTML 导出做成覆盖层
HTML 导出会自己循环播放，没有 progress 参数，所以做法是：先把它盖在页面上，页面加载完成后再移除。把 index.html 上传到网站（比如 /particle-logo/index.html），再把下面这段放在 <body> 开头：
<div id="logo-loader" style="position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center">
<iframe src="/particle-logo/index.html" title="Loading" width="480" height="520" style="border:0;max-width:100%"></iframe>
</div>
<script>
const loader = document.getElementById('logo-loader');
const shownAt = performance.now();
const MIN_MS = 1500; // 动画至少显示 1.5 秒
function hide() {
setTimeout(() => loader.remove(), Math.max(0, MIN_MS - (performance.now() - shownAt)));
}
if (document.readyState === 'complete') hide();
else window.addEventListener('load', hide);
</script>覆盖层铺满整个窗口，页面的 load 事件触发后移除。MIN_MS 让动画至少显示 1.5 秒，避免一闪而过，按需要修改这个数字。
尊重“减少动态效果”设置
导出的组件和 HTML 文件都不会检测系统的“减少动态效果”设置。Vue 和 React 组件可以在用户开启这个设置时传入固定的 progress 为 100，让 Logo 直接成形；覆盖层的做法则可以在这种情况下干脆不显示。
访客要下载多大的文件？
下面是我们在 2026 年 11 月 3 日 实测的导出文件大小（默认点阵步长 4，括号里是 gzip 压缩后）。文件里已经包含 Logo 的点阵和全部代码，运行时不再发网络请求：
| 测试图 | 采样点数 | HTML 文件 | Vue 组件 | React 组件 |
|---|---|---|---|---|
| 白色四字母字标（单色） | 589 | 22.4 KB (6.4 KB gzip) | 24.2 KB (6.9 KB gzip) | 25.1 KB (7.0 KB gzip) |
| 五种颜色的几何图形 | 4,139 | 66.5 KB (12.3 KB gzip) | 68.2 KB (12.9 KB gzip) | 69.2 KB (13.1 KB gzip) |
| Particle Logo 自己的标志（银灰单色调） | 7,082 | 35.8 KB (11.0 KB gzip) | 37.5 KB (11.6 KB gzip) | 38.4 KB (11.7 KB gzip) |
体积主要由点数和颜色决定：每个点带着自己的 RGB 颜色时，文件会明显变大；代码导出最多保留 1,600 个点。
常见问题
加载动画需要联网吗？
不需要。导出的 HTML 文件和组件自带点阵和代码，运行时没有网络请求。
需要哪个套餐？
HTML 导出在免费版里，可以做覆盖层。带 progress 参数的 Vue 和 React 组件需要 Pro，见价格。