CSS 加载动画生成器
CSS 加载动画生成器，是指从内置的 12 种纯 CSS loading 效果里选一个，在线调节颜色、尺寸、速度与粗细，实时预览并一键复制 HTML 与 CSS 代码的前端工具。它免费、无需注册，覆盖圆环转圈、跳动圆点、音柱波浪、脉冲涟漪、不定进度条与骨架屏闪光，除骨架屏外只动 transform 与 opacity，并附带减弱动态适配。代码全在浏览器本地生成，内容不上传。
约 1 圈/秒 · 动画属性：transform（合成层友好）
样式库
参数
此样式的元素个数固定
支持 HEX 与 rgb() / rgba()；取色器不支持透明度，半透明色请手输
「用骨架屏常用配色」只在骨架屏样式下可用
类名同时是关键帧名的前缀，同一页面放多个加载动画时各用各的类名就不会撞名。
<div class="loader" role="status" aria-label="加载中"></div>
.loader {
box-sizing: border-box;
display: inline-block;
width: 48px;
height: 48px;
border: 5px solid #e5e7eb;
border-top-color: #3b82f6;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.loader {
animation-duration: 3s;
}
}
如何使用CSS 加载动画生成器
在样式库里点一个加载动画，大预览和下方代码会立即切换到这个样式。
调颜色、尺寸、速度与粗细（圆点和音柱还能改个数），需要时把类名改成你项目里的名字。
分别复制 HTML 与 CSS 粘进页面，或点「复制全部」得到一段能直接打开的单文件代码。
关于CSS 加载动画生成器的常见问题
- CSS 加载动画生成器会把我的代码上传吗？
- 不会。样式、颜色、尺寸、类名都只在你的浏览器里拼装成代码，生成和预览都在本地完成，内容不上传、无需注册。页面只记住预览底色和是否暂停这两项展示偏好，你调的参数刷新后会回到默认。站点本身有匿名访问统计，但它不会读到你填的任何内容。
- 三个点跳动的 CSS 加载动画怎么写？
- 结构是一个 div 里放三个 span，span 做成圆点并共用一个上下跳的 @keyframes，再用 nth-child 给每个点错开 animation-delay。本工具选「跳动圆点」就是这个写法，周期 1.2s 时三个点的延迟分别是 -0.6s、-0.4s、-0.2s。延迟写成负数，页面一打开三个点就都在动，不会出现前一秒后两个点静止的情况。
- CSS 加载动画和 GIF 加载图哪个好？
- CSS 加载动画体积只有几百字节、不占图片请求，改颜色和大小只改一行代码，在高清屏上也不会糊。GIF 的好处是不依赖样式表，邮件正文等不支持 CSS 动画的场合只能用它。网页里的加载提示优先用 CSS；需要 GIF 或视频格式时请用视频与动图类工具，本工具不导出 GIF。
- CSS 加载动画会影响页面性能吗？
- 本工具的样式里，除骨架屏外都只动 transform 与 opacity，浏览器通常可以交给合成层处理，不触发重新布局。骨架屏的闪光动的是 background-position，每帧都要重绘，面积大、条数多时会更费电，页面上的说明行会标出来。加载动画本身很轻，真正拖慢页面的往往是它在等的那个请求。
- 生成的 CSS 加载动画要加浏览器前缀吗？
- 不需要。用到的 animation、transform、@keyframes 在现代浏览器里都已无前缀可用，本工具因此不输出 -webkit- 前缀。需要留意的是 inset 与 flex 布局的 gap，它们要求较新的浏览器（例如 Safari 14.1 起），要兼容更老的内核请自行改写并实测。
- CSS 加载动画怎么改颜色和转速？
- 颜色改主色（圆环类还有轨道色），转速改周期：周期是转一圈或跳一轮的秒数，数值越小越快。默认圆环周期 1s，也就是约每秒一圈。在本工具里拖滑杆或直接输入数字即可，代码区实时更新；粘进项目后要再改，就改 animation 那一行里的秒数和 border-top-color。
- 一个页面放多个 CSS 加载动画会冲突吗？
- 只要类名不同就不会。本工具把类名同时用作 @keyframes 名的前缀，类名叫 btn-loader 时关键帧就叫 btn-loader-spin，另一个叫 page-loader 的加载动画用的是 page-loader-spin，两者互不覆盖。如果两个都用默认的 loader，后写的 @keyframes 会覆盖先写的，样式不同时就会串。
- CSS 加载动画在用户开了减弱动态时会怎样？
- 勾选「减弱动态适配」后，代码末尾会多一段 prefers-reduced-motion 媒体查询，把周期和每个延迟都放大 3 倍，例如圆环从 1s 一圈变成 3s 一圈。我们选择放慢而不是关掉，因为停住的加载图标看起来像页面卡死了。这是本工具的取舍，你也可以把这段改成 animation: none。
- CSS 加载动画生成器能导出 GIF 或 SVG 吗？
- 不能。本工具只生成纯 CSS 与 HTML 片段，不导出 GIF、APNG、SVG 或 Lottie 文件，也不做反解析（粘贴别人的加载动画代码回填参数）和 Tailwind 类名输出。需要动图格式时，可以把预览录屏后用视频与动图类工具转换。
- 骨架屏闪光效果也能用 CSS 加载动画生成器做吗？
- 能。样式库最后一个就是骨架屏闪光：一条底色为轨道色的灰条，上面有一道主色高光从右往左扫过，默认周期 1.4s。点「用骨架屏常用配色」可以一次性换成常见的浅灰配色。尺寸是条的宽度、高度是条的高度，做多行占位时复制多份 div 并各自调宽度即可。
CSS 加载动画样式与参数速查表
下表列出本工具内置的 12 种纯 CSS loading 效果，表中内容由生成逻辑的预设表直接渲染。「动的属性」一栏决定了动画是否走合成层，是挑样式时最该看的一列。
| 样式 | 适用场景 | 可调参数 | 动的属性 | 默认周期 |
|---|---|---|---|---|
| 圆环转圈 | 按钮、卡片内的短等待 | 尺寸 / 环宽 / 周期 / 主色 / 轨道色 | transform | 1s |
| 双弧旋转 | 整页加载遮罩 | 尺寸 / 环宽 / 周期 / 主色 | transform | 1.2s |
| 跳动圆点 | 聊天「对方正在输入」、轻量等待 | 尺寸 / 周期 / 个数 / 主色 | transform | 1.2s |
| 渐隐圆点 | 行内文字旁的加载提示 | 尺寸 / 周期 / 个数 / 主色 | opacity | 1.2s |
| 音柱波浪 | 音频、语音类处理中 | 尺寸 / 周期 / 个数 / 主色 | transform | 1s |
| 脉冲 | 连接中、定位中、录音中 | 尺寸 / 周期 / 主色 | transform + opacity | 1.2s |
| 涟漪 | 搜索中、扫描中 | 尺寸 / 环宽 / 周期 / 主色 | transform + opacity | 1.5s |
| 翻转方块 | 品牌感较强的启动页 | 尺寸 / 周期 / 主色 | transform | 1.2s |
| 不定进度条 | 页面顶部、上传与导出等长任务 | 尺寸 / 高度 / 周期 / 主色 / 轨道色 | transform | 1.5s |
| 圆周点 | 系统风格的等待指示 | 尺寸 / 周期 / 主色 | opacity | 1s |
| 九宫格 | 仪表盘、图表区加载 | 尺寸 / 周期 / 主色 | transform | 1.3s |
| 骨架屏闪光 | 列表、卡片的内容占位 | 尺寸 / 高度 / 周期 / 主色 / 轨道色 | background-position | 1.4s |
加载动画英文常叫 CSS loader 或 spinner，搜索 spinner CSS、loading animation CSS、CSS loader generator 找到的都是同一类东西：一段纯 CSS 代码加一个空的 div。本工具的功能特点是 12 种样式、参数随样式启用、类名即关键帧前缀、负延迟错相、显式 border-box、减弱动态放慢 3 倍，以及自带 role 与 aria-label；选好后一键复制 CSS 加载动画代码，或直接复制带 style 标签的 loading 动画代码。
转圈、圆点、进度条：怎么选加载动画
加载中动画的作用是告诉用户「还在处理，没卡住」。转圈动画 CSS 最常见的是圆环转圈：一个圆形边框只给上边上色，再整体旋转，适合按钮里、卡片里一两秒的短等待。跳动圆点和渐隐圆点更轻，常见于聊天里的「对方正在输入」。进度条动画适合长任务，比如上传、导出、页面顶部的路由切换；本工具做的是不定进度条，不显示具体百分比。内容还没回来、但知道版面长什么样时，用骨架屏占位比转圈更不显得慢。
只动 transform 与 opacity 才不卡
浏览器画一帧大致要经过布局、绘制、合成三步。改 width、margin 会重新布局，改 background、border-color 会重新绘制，而 transform 与 opacity 通常只在合成这一步处理，主线程忙的时候动画也不容易掉帧。所以本工具的样式里，转圈靠 rotate、圆点跳动靠 translateY、音柱靠 scaleY、渐隐靠 opacity。
| 动的属性 | 用到的样式 | 代价 |
|---|---|---|
| transform | 圆环、双弧、跳动圆点、音柱、脉冲、涟漪、翻转、进度条、九宫格 | 通常只需合成 |
| opacity | 渐隐圆点、圆周点、脉冲、涟漪 | 通常只需合成 |
| background-position | 骨架屏闪光 | 每帧重绘，面积大时注意 |
为什么圆点要用负的 animation-delay
三个点加载动画、音柱波浪这类效果，是让每个子元素播放同一段动画、只是相位错开。网上常见写法给第二、三个点加正的延迟，问题是正延迟的意思是「先等一会儿再开始」，页面刚打开的第一个周期里后面的点会静止。本工具一律用负延迟：负值的意思是「假装已经播放了这么久」，所以首帧起所有点都在动。
公式是第 i 个点（从 0 数）的延迟 = −(N − i) × D ÷ (2N)。以 3 个跳动圆点、周期 1.2s 为例，三个点的延迟依次是 -0.6s、-0.4s、-0.2s，生成的结构如下：
<div class="loader" role="status" aria-label="加载中"> <span></span> <span></span> <span></span> </div>
box-sizing 不对，圆环就会变大
圆环转圈用 border 画环。如果你的页面是默认的 content-box，width 只算内容区，边框画在外面：一个写着 48px、环宽 5px 的圆环，实际会占 58px。这正是「从网上复制过来，大小和演示不一样」的头号原因。本工具在每个带尺寸的元素上都显式写了 box-sizing: border-box，不论你的页面是哪种盒模型，尺寸都和预览一致。
默认圆环生成的 HTML：
<div class="loader" role="status" aria-label="加载中"></div>
减弱动态：放慢而不是关掉加载动画
系统设置里开了「减弱动态」的用户，对持续运动的画面更敏感。常见做法是在 prefers-reduced-motion 下直接 animation: none，但加载指示器一停，看起来就像页面卡死了。本工具的默认做法是把周期放大 3 倍：默认圆环从 1s 一圈变成 3s 一圈；多元素样式的延迟也同比例放大，例如跳动圆点变成 -1.8s、-1.2s、-0.6s，否则相位关系会乱掉。不需要时取消勾选即可，代码里就不再有这一段。
加载动画的无障碍：role 与 aria-label
一个只会转的 div 对读屏软件来说什么也不是。本工具生成的根元素自带 role="status" 与 aria-label="加载中"，读屏会把它当作一个状态提示读出来。内容加载完成后，记得把这个元素移除或隐藏，否则读屏用户会一直以为还在加载。