CSS 加载动画生成器
调整尺寸、时长和颜色；圆环支持独立轨道色、强调色与厚度。预览和导出使用相同的标记和 CSS。
13 种固定模式，各预设仅显示相关的颜色、线宽、间距或环控件。
控制旋转环或波纹的线条宽度。
仅在本预览中停止动画。导出的 CSS 同时遵循系统减少动态效果偏好。
厚度为 1–12px，且最多为尺寸的六分之一。
实时预览
旋转环
正在加载内容
此预览中的动画是装饰性的。产品中请搭配简洁且稳定的加载状态。
使用步骤
如何使用
- 选择 13 种加载动画之一，包含原有旋转环、圆点、条形、圆环和双圆环。
- 调整尺寸、时长、颜色，以及线宽、间距或环厚度。
- 比较正常与减少动态效果，再复制 HTML 和 CSS。
控制与范围
尺寸：24–96px；时长：0.4–3s；旋转环/波纹线宽及圆点、条形、网格、波浪间距：2–12px。环厚度为 1–12px，最多为尺寸的六分之一。仅显示相关控件，颜色须为六位十六进制值。多图形模式按尺寸缩放图形或高度，总宽度还包含间距。
预览与导出
预览在隔离样式根中渲染与导出相同的 HTML 和 CSS。圆环和双圆环使用独立轨道色与强调色，其余 11 种使用单色。脉冲变化尺寸和透明度，波纹扩展圆环，网格变化九个方块，轨道围绕中心旋转，翻转转动方块，追逐循环六个圆点，弹跳交替两个圆形，波浪缩放五个条形。仅固定模式，不接受用户 HTML 或 CSS，全部本地生成。
无障碍动态效果
导出 HTML 包含 role="status" 和本地化加载标签。CSS 遵循 prefers-reduced-motion，包括伪元素。加载消息应保持稳定，仅在任务状态变化时更新。
常见问题
你可能还想知道
导出动画需要 JavaScript 吗？
不需要，复制的动画仅使用 HTML 和 CSS。
减少动态效果会移除状态吗？
不会。它停止动画，同时保留可识别的静态加载形状与状态标签。
会上传任何内容吗？
不会，设置、预览与代码生成均留在浏览器中。