将 CPU/GPU 使用率从约 50% 降至约 3-8%在典型笔记本电脑（i7-7500U）上。减少电池消耗、发热、风扇噪音，以及其他应用的变慢。
现在就用一些流畅的低帧率加载动画来让你的应用或网站去屎化吧！
纯 CSS、低帧率加载动画
此页面完全不使用 JavaScript。查看其公有领域代码，随意复制！
如果加载动画完全不动，你的桌面设置中很可能启用了“减少动态效果”。 此页面尊重该设置，将它们显示为静止状态。
实现方式： SVG（更好，见下文） 仅 HTML 元素
选择一个设计以仅显示其所在行（以便单独测量它），或者 显示全部。
| 设计 | 16px | 48px | 变化次数/秒 | 动画对象 | GPU 使用率（在 Chromium 中） |
|---|---|---|---|---|---|
| 射线环（8） | 整个加载动画旋转。在 HTML 中小尺寸下会抖动；SVG 版本不会。 | HTML 和 SVG 相同：只有一个元素有动画。 | |||
| 圆点环（8） | 整个加载动画旋转。在 HTML 中小尺寸下会抖动；SVG 版本不会。 | HTML 和 SVG 相同：只有一个元素有动画。 | |||
| 分段环（8） | 整个加载动画旋转。在 HTML 中小尺寸下会抖动，因为分段的裁剪边缘在每个角度渲染效果不同；SVG 版本不会。 | HTML 和 SVG 相同。实测：HTML 6–10%，SVG 8–9%（10 次/秒）。 | |||
| 分段环 2（8） | 分段环不旋转：每个分段在原地依次经过各个淡出级别，因此环的像素从不移动，其形状也不会抖动，HTML 中也是如此。八个分别动画的元素。 | 优先使用 SVG。 实测：HTML 14%，SVG 8–9%（10 次/秒）；HTML 30%，SVG 13–15%（30 次/秒）。 | |||
| 方形环（8） | 每个方块的透明度；八个分别动画的元素。3×3 网格在旋转 45° 后看起来不一样，所以不能只是旋转。 | SVG 预期更低：在 HTML 中，8 个动画元素各自是独立的 GPU 图层。 | |||
| 方形环 2（8） | 方形环使用 2px 间隙而非 1px（在 16px 下）。 | SVG 预期更低：在 HTML 中，8 个动画元素各自是独立的 GPU 图层。 | |||
| 2×2 方块 | 整个加载动画旋转，每步 90°。 | HTML 和 SVG 相同：只有一个元素有动画。 | |||
| 滴答时钟 | 只有指针旋转；表盘保持静止。 | HTML 和 SVG 相同：只有一个元素有动画。 | |||
| 三个点 + 暂停 | 每个点的透明度；三个分别动画的元素。每个点依次点亮，然后一步全部不亮。 | SVG 预计更低：在 HTML 中，3 个动画元素各自独占一个 GPU 图层。 | |||
| 三个方块 + 暂停 | 三个点 + 暂停，使用方形点。 | SVG 预计更低：在 HTML 中，3 个动画元素各自独占一个 GPU 图层。 | |||
| 三个方块 + 暂停 2x | 三个方块 + 暂停，其中未点亮的步骤为两步而非一步。 | SVG 预计更低：在 HTML 中，3 个动画元素各自独占一个 GPU 图层。 | |||
| 分段沙漏（10） | 每个腔室的每个填充高度对应一个形状，再加上每个流长度对应一个形状；共 15 个独立动画元素，同一时间最多可见三个。19 个步骤：沙子向下流，底部排空，然后顶部从下方重新填充，各阶段之间保持 2 步。 | SVG 预计更低：在 HTML 中，15 个动画元素各自独占一个 GPU 图层。 | |||
| 分段沙漏（40） | 每个腔室的每个填充高度对应一个形状，再加上每个流长度对应一个形状；共 60 个独立动画元素，同一时间最多可见三个。82 个步骤：沙子向下流，底部排空，然后顶部从下方重新填充，各阶段之间保持 8 步。 | SVG 预计更低：在 HTML 中，60 个动画元素各自独占一个 GPU 图层。 |
HTML 或 SVG：GPU 占用（在 Chromium 中）
使用 Chromium 的任务管理器（在 Linux/Windows 上按 Shift+Esc）中的“GPU 进程”一行测量，在 i7-7500U 笔记本上，一次只显示一个设计。表格中标注“已测量”的即为这些；其他结论来自设计动画的方式，属于预期而非实测。
| 设计 | 变化次数/秒 | HTML | SVG |
|---|---|---|---|
| 分段圆环（旋转） | 10 | 6–10% | 8–9% |
| 分段圆环 2（原地淡入淡出） | 10 | 14% | 8–9% |
| 分段圆环 2（原地淡入淡出） | 30 | 30% | 13–15% |
- 旋转整个加载指示器在 HTML 和 SVG 中开销相同：它只绘制一次，GPU 只负责旋转已完成的图像。
- 对许多 HTML 元素做动画（分段、方块、点或沙面高度本身）通常会让每个元素独占一个 GPU 图层，GPU 在每一步都会混合所有这些图层。
- 在 SVG 中，形状不会被赋予各自的图层：小图像在每一步都会重绘，而 GPU 仍然只绘制一个图层。
- 要查看图层，请打开 DevTools，然后进入 Rendering，并开启“Layer borders”。
HTML 或 SVG：视觉质量
- 旋转时的抖动（Chromium 和 Firefox）：旋转的 HTML 加载指示器（Ray ring、Dot ring、Segmented ring）在较小尺寸下会出现可见的抖动，因为它们的各个部分在每个新角度都会被重新绘制，边缘每次都会略有不同。SVG 版本则不会。
- 万亿美元级别的公司往往会做出抖动的加载指示器，例如 Google AI Studio：视频。
- Segmented ring 2不会旋转，所以它在 HTML 中也不会抖动。
- Firefox 155：HTML 版 Segmented ring 会在其各段之间的间隙中画出细小的灰色垂直线和水平线，在 100% 缩放、48px 下可见。每个 HTML 段都是一整圈轮廓被裁剪成一段，使用
clip-path，而被裁掉部分的轮廓细片很可能会沿着切割边缘露出来。SVG 版本没有这个问题。