CSS 加载动画生成器

选择旋转圆环、缩放脉冲、三点跳动、条形律动等常见加载动画，调节尺寸、时长、颜色、缓动与迭代次数，实时预览效果，并一键复制完整的 @keyframes 与动画属性 CSS。

动画参数已就绪

动画类型

动画颜色

#3366ff

尺寸（px）

动画时长（秒）

缓动函数

迭代次数

复制得到的 CSS 含 @keyframes 定义与 .loader 规则，可直接粘贴到项目中；三点与条形动画会自动生成三个子元素。

实时预览与代码

生成的 CSS 将显示在这里。

使用规则

复制代码包含 @keyframes 与 .loader 选择器，按需替换类名即可。
三点跳动与条形律动的 HTML 需包含三个子元素（如 <span>）。
将 infinite 改为具体次数可让动画只播放有限次。
动画时间过长会让用户感觉卡顿，建议控制在 1 秒左右。
本工具完全在浏览器本地运行，输入数据不会上传到任何服务器。