挑选动画
左侧图鉴列出 43 种加载动画，可用「全部 / Spinner / Dots / Bars / Pulse / Progress / 形状」分类筛选，每一格都在实时播放。点中任意一格，主预览与代码立刻切换成它。
可视化制作 CSS 加载动画与转圈效果，43 种动画实时预览，可调尺寸、速度与配色，一键复制纯 CSS 代码。
加载动画
预览
颜色
px
s
<div class="loader"></div>什么是 CSS 加载动画生成器？
CSS 加载动画生成器是一款可视化工具，让你无需手写代码即可制作加载动画与转圈效果。左侧是一份实时播放的动画图鉴，右侧预览区同步呈现所选效果，配套的 CSS 与 HTML 随时可以复制到你的项目中。
43 种动画分门别类地摆在图鉴里，圆环、圆点、条形、脉冲、进度与自定义形状各有代表；颜色、尺寸与速度三个参数全部集中在一处。从最经典的转圈开始，一边操作一边读到干净、符合标准的代码——完全不必死记 @keyframes 的写法细节。
它适合所有需要等待反馈的人：前端开发者可以快速为按钮和列表挑一个合适的加载指示，设计师能把动效想法转化为真正能用的 CSS 代码，学习者能看懂常见加载动画背后的关键帧与变换技巧，任何想要整洁加载样式却不愿从零手写的人也能直接使用。
隐私优先设计：生成器完全在你的浏览器中运行。你的参数配置以及生成的代码绝不会上传到服务器。
如何生成 CSS 加载动画
调整颜色
在「颜色」卡片里用取色器挑选主色，或直接输入十六进制色值。轨道色、渐变过渡与元素淡出态都会跟着主色自动生成。
调整尺寸与速度
用滑块或数字输入框设定尺寸（12 到 120 像素）与速度（0.3 到 3 秒一圈）。界面加载动画通常以 0.7 到 1.2 秒为舒适区间。
检查视觉效果
预览区直接使用将要输出的 CSS 渲染，所以你看到的画面就是复制出去的代码跑出来的效果。可在浅色、深色与棋盘三种背景之间切换，确认对比度是否足够。
复制代码
在 HTML 与 CSS 选项卡之间切换，点击复制把代码发送到剪贴板，直接粘贴进你的项目。粘贴后无需任何 JavaScript 就能运行。
功能特点
43 种动画效果
覆盖圆环、圆点、条形、脉冲、进度与自定义形状六大类，从最经典的转圈到 3D 立方体一应俱全。
分类筛选
按 Spinner、Dots、Bars、Pulse、Progress 与形状分类快速定位，一次只看当前关心的那几种。
图鉴实时播放
左侧每一格缩略图都是活的动画，不用选中也能看清效果。
实时动画预览
右侧预览区用的就是生成出来的 CSS，改动参数立刻反映在画面上，不需要刷新页面去猜效果。
主色一键换肤
取色器选好主色，轨道色、渐变与元素的淡出态自动派生，改一次整条动画跟着换。
尺寸与速度可调
12 到 120 像素的尺寸、0.3 到 3 秒一圈的速度，滑块与数字输入框双向同步。
三种预览背景
浅色、深色与棋盘格背景随时切换，检查动画在深色界面上的对比度是否依然清晰。
纯 CSS 输出
只依赖 @keyframes 与 transform / opacity 动画，不含任何 JavaScript、图片或第三方库，直接粘贴即可运行。
HTML 与 CSS 双输出
HTML 选项卡给出配套的标记结构，CSS 选项卡给出完整样式，两者一一对应。
参数收敛为 CSS 变量
尺寸、颜色与速度都收敛成 --loader-* 自定义变量，改一个值就能整体调整，不必翻找每条规则。
随机换一种
点击图鉴标题栏的刷新图标，随机切换到当前分类里的另一种效果，适合快速挑选。
常见问题
生成的加载动画需要 JavaScript 吗？
不需要。输出只有 @keyframes 与常规属性，运行时完全靠 CSS 驱动，不含任何脚本、图片或第三方库。页面里的 JavaScript 只负责生成器本身的控件，复制出去的代码与它无关。
动画可以自动停止吗？
不能，CSS 动画本身不知道请求什么时候结束。正确做法是由应用逻辑控制：请求开始时插入加载元素，成功、失败或取消时把它移除或隐藏。
能显示真实的进度百分比吗？
不能。旋转类动画属于「不确定进度」指示器，只表示正在进行而不表示做到哪一步。图鉴里的「分步进度」「无限进度」展示的是循环的进度动效，同样不是真实百分比；如果确实需要进度，请使用 <progress> 元素，或由 JavaScript 更新一个进度条的宽度。
无障碍方面需要注意什么？
纯装饰性的加载图标对读屏软件没有意义，建议给它加上 role="status" 与 aria-label="加载中"，让用户知道页面正在等待。若动画下方已有文字说明，也可以把图标标记为 aria-hidden="true"。
为什么要考虑 prefers-reduced-motion？
部分用户对持续循环的动画敏感，可能引起不适或眩晕。可以在 @media (prefers-reduced-motion: reduce) 里把动画时长调长、换成更柔和的淡入淡出，或者干脆停下来改用静态提示。
速度设成多少比较合适？
界面上的加载指示通常以 0.7 到 1.2 秒一圈为舒适区间。太快会显得焦躁，太慢则容易被误认为是页面卡死。骨架屏或预计耗时较长的操作可以适当放慢。
CSS spinner 和 SVG spinner 该怎么选？
圆环、圆点、条形这类基础形状用 CSS 更简洁，零依赖且体积小；需要复杂的路径、渐变描边或精确控制轮廓时，SVG 更容易实现。生成器输出的 CSS 已经用 transform 和 opacity 做动画，移动端性能也足够好。
在手机上会卡吗？
不会。所有关键帧动画只改动 transform 与 opacity，这两个属性由合成层处理，不会触发重排或重绘，在低端设备上也能保持流畅。
生成的类名会和现有样式冲突吗？
对外输出的类名固定为 .loader，关键帧统一以 loader- 开头。如果你的项目里已有同名规则，改一下前缀即可，或者把整段 CSS 放进一个单独的作用域里。
我的数据会被保存吗？
不会。生成器完全在你的浏览器中运行，任何参数配置以及生成的代码都不会发送到服务器。