CSS 加载动画生成器

工具介绍

CSS 加载动画是一个用来表示内容正在加载的小型动效元素——旋转环、跳动圆点、脉冲圆，或者移动的进度条——不需要 JavaScript 动画循环，也不需要图片或 GIF。它由几条 CSS 规则加一段定义元素随时间变化的 @keyframes 组成。

这个工具生成四种常见的加载动画，都是真实可用的 CSS：靠边框旋转的环形加载器、依次跳动的三个圆点、一放一缩的脉冲圆，以及带滑动填充的进度条。在预览里调整尺寸、颜色和动画时长，然后复制生成的 CSS 和对应的最简 HTML。

来源：CSS Animations Level 1, W3C —— 定义 @keyframes 和这些加载动画所依赖的动画属性的规范。

为什么使用它？

• 实时预览随样式、尺寸、颜色或速度的调整而动态播放，效果所见即所得。
• 生成完整的 CSS，包括 @keyframes 规则，而不是留一半让你自己补全。
• 同时输出 CSS 对应的 HTML 结构，不用自己猜类名和元素层级。
• 四种不同的动画模式（旋转、跳动、脉冲、进度条）覆盖了大多数常见的加载场景。
• 纯 CSS 动画——不需要 JavaScript，不需要图片资源，比动图 GIF 更轻更流畅。
• 完全在浏览器本地运行，免费，不用注册。

使用方法

1. 选择加载动画样式：旋转环、跳动圆点、脉冲圆或进度条。
2. 拖动尺寸滑块放大或缩小加载动画。
3. 选一个颜色——它会成为加载动画的主色（旋转环的边框、圆点或进度条的填充色）。
4. 调整速度让动画更快或更慢；大多数界面加载动画每个循环在 0.6 秒到 1.5 秒之间最合适。
5. 把生成的 CSS 复制到样式表里，再把 HTML 代码粘贴到需要显示加载动画的位置。

示例

输入

样式：旋转环 · 尺寸：40px · 颜色：橙色 · 速度：1.0s

输出

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

经典的环形加载动画：一个圆形元素的三边用近透明边框，第四边用实色，配合线性无限旋转动画持续转动。

为什么用 CSS 加载动画而不是 GIF

动图 GIF 加载效果曾经是默认选项，但如今 CSS 加载动画几乎总是更好的选择：它只是几百字节的文本，而不是二进制图片文件；靠边框和 transform 绘制，任意放大都不会失真；改颜色只需要改一个 CSS 值，而不用重新导出一张图。

这里的四种样式——旋转环、圆点、脉冲、进度条——也是实际界面里最常出现的几种，从按钮内的加载状态到全屏遮罩都用得到。它们的 keyframes 只改变 transform 和 opacity，浏览器可以在 GPU 上流畅渲染，不会拖慢页面其他部分。

根据场景选样式

• 旋转环：最中性、通用的选择——放在按钮里或小型内联加载状态都合适。
• 跳动圆点：给人更轻快、活泼的感觉；常用于聊天「正在输入…」提示或短暂等待。
• 脉冲圆：适合单个元素的加载指示，或者当作「在线/活跃」状态点。
• 进度条：暗示正在向前推进，即使没有精确的百分比，页面加载或多步骤流程里也常用到这种样式。

在项目中使用加载动画

把生成的 CSS 粘贴到样式表里一次，之后在任何需要加载状态的地方复用 HTML 代码——表单提交时按钮内、拉取数据时卡片上方、或者居中放在全屏遮罩层里。因为动画完全靠 CSS 实现，开关它只需要往 DOM 里加/删元素，或者用 display: none 隐藏。

→ 盒阴影生成器 · CSS 压缩器

常见问题