CSS 加载动画生成器

CSS 加载动画生成器: 用途

从七种加载指示器模板（圆环、双圆环、圆点、条形、脉冲、进度条和旋转方块）中选择，并调整颜色、大小和时长。动画只使用 transform 和 opacity。

代码带有 role=status、给屏幕阅读器的隐藏文字，并为系统设置了减少动态效果的用户放慢动画。

使用方法

1. 选择加载动画模板。
2. 调整颜色、大小和时长。
3. 复制 HTML 和 CSS。

使用场景

• 网站和系统的加载界面。
• 按钮和卡片里的加载状态。
• 替换沉重的加载 GIF。

常见问题

为什么用 CSS 而不是 GIF？

CSS 加载动画只有几个字节，在任何屏幕上都清晰，用一个变量就能换颜色，并且在浏览器主线程之外运行，因此页面加载时依然流畅。

加载动画无障碍吗？

代码包含 role="status" 和一段给屏幕阅读器的隐藏文字（加载中…）。启用 prefers-reduced-motion 时，动画会明显变慢，照顾要求减少动态效果的用户。

什么时候该显示加载动画？

只有等待超过约半秒时才显示。对于很短的等待，闪烁的加载动画弊大于利。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具