⏳
CSS 加载动画生成器
挑选旋转、脉冲、点点等纯 CSS 加载动画（spinner/loader），自定义颜色大小并复制代码。
本地处理 · 不上传
加载工具中…
相关：loader · spinner · 加载 · loading · 动画 · css
CSS 加载动画生成器提供多种纯 CSS 的加载指示器——旋转、跳动、脉冲、进度条，可调尺寸颜色速度，输出即用的代码。
使用步骤
- 选择加载动画样式
- 调整尺寸、颜色与速度
- 预览效果
- 复制 HTML 与 CSS
使用场景
- 为数据请求添加等待提示
- 页面骨架加载时的占位动画
- 按钮提交中的状态指示
- 替代 GIF 加载图减小体积
小贴士
- 等待时间在一秒以内不必显示加载动画，闪一下反而让人觉得卡顿；超过三秒则应给出进度或预计时间。
- 旋转动画只动 transform，性能开销极小，不会因为一直转就拖慢页面。
- 务必给加载区域加上 `aria-busy` 或文字说明，纯视觉的动画对屏幕阅读器用户是不存在的。
常见问题
什么时候该显示加载动画？
通常延迟 300 毫秒后再显示。请求很快返回时动画一闪而过，反而给人页面闪烁的负面观感。超过 3 秒的等待则应升级为带进度的提示。
CSS 动画比 GIF 好在哪？
体积几乎为零、任意缩放不失真、颜色可随主题变化、且背景天然透明。GIF 加载图现在基本没有使用理由。
会影响性能吗？
只动 transform 和 opacity 的动画由合成器处理，几乎不消耗主线程。但如果页面同时有几十个加载动画，仍应考虑合并成一个整体提示。
CSS 加载动画生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 加载动画生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。