无需登录 数据私有 本地保存

CSS加载动画生成器 - 各种Spinner/Loader代码

13
0
0
0
经典旋转
双环交替
脉冲圆点
弹跳圆点
波浪条
旋转圆点
方块翻转
渐变环
主颜色
尺寸50px
动画速度1.0s
边框粗细4px
📺 实时预览 深色背景
📄 HTML
🎨 CSS
📚 常见问题 & 知识点

CSS动画无需额外HTTP请求，体积小（通常仅几百字节），支持无损缩放，可通过CSS变量灵活调整颜色和尺寸，兼容现代浏览器。而GIF/APNG是位图，放大会模糊，修改需要重新编辑图片。CSS动画还能响应系统偏好（如 prefers-reduced-motion），更利于无障碍访问。

经典旋转Spinner适合大多数场景，认知度最高；弹跳圆点显得活泼，适合社交类应用；波浪条适合音乐或媒体类产品；脉冲圆点简洁优雅，适合极简风格；渐变环更具现代感，适合科技类品牌。建议根据品牌调性和页面整体风格来选择。

合理使用CSS动画对性能影响极小。建议优先使用 transform 和 opacity 进行动画（而非改变width/height/top/left），因为前者只触发合成阶段，不会引起重排（reflow）和重绘（repaint）。本工具生成的所有动画均遵循这一最佳实践，确保60fps流畅运行。

prefers-reduced-motion 是CSS媒体查询，用于检测用户是否在系统中开启了"减少动态效果"。为提升无障碍体验，建议在代码中添加：
@media (prefers-reduced-motion: reduce) { .loader { animation-duration: 3s; } }，大幅降低动画速度或直接停止动画。

生成的CSS使用自定义属性（变量）如 --loader-color、--loader-size 等。您可以在父容器上动态修改这些变量，实现实时主题切换，无需重新加载CSS文件。例如使用JS：document.querySelector('.loader-container').style.setProperty('--loader-color', '#ff0000');
🔧 相关工具