CSS 加载动画生成器

关于 CSS 加载动画生成器

这个工具生成纯 CSS 加载动画 —— 无图片、无 JavaScript。从六种常见样式中选择，自定义颜色、尺寸和动画时长，复制合并后的 HTML/CSS 直接粘贴到你的项目即可。

动画类型

• 旋转环 —— 一个带透明缺口的旋转环（经典"loading"图标）。
• 双环 —— 两个同心环反向旋转。
• 三点跳动 —— 三个跳动的圆点，适合聊天式加载器。
• 五条条纹 —— 五根竖条上下缩放（均衡器样式）。
• 脉冲 —— 单个圆圈往复脉动。
• 涟漪 —— 圆圈向外扩散的涟漪效果。

使用方法

1. 选择动画类型。
2. 选择颜色（双环/条纹还需选次要颜色）。
3. 用滑块调整尺寸和动画时长。
4. 点击复制 HTML复制完整 HTML + CSS 代码块，或仅复制 CSS仅复制样式规则。
5. 粘贴到你的 HTML 文件或样式表中。

常见问题

这些加载动画符合无障碍标准吗？ 它们是装饰性的。使用加载器表示加载状态时，还应包含视觉隐藏的文本标签（如 <span class="sr-only">加载中…</span>），并使用 prefers-reduced-motion 为有此设置的用户禁用动画。

所有浏览器都支持吗？ 是的 —— 仅使用标准 CSS（transform、animation、border-radius、opacity）。所有现代浏览器均支持，若不支持动画则降级为静态形状。

可以做成响应式吗？ 生成的代码使用像素尺寸以保证可预测性。要使其响应式，可将加载器放入容器，在断点处使用 transform: scale()，或将像素值转换为 em / rem。