CSS 加载动画生成器
免费 CSS 加载动画生成器：十种纯 CSS 加载图标，实时调节尺寸、速度、粗细与颜色，一键复制即贴即用的 HTML 与 CSS 代码。
CSS 加载动画生成器生成什么？
它用纯 CSS 构建加载指示动画：旋转环、圆点、竖条、涟漪、脉冲、轨道、翻转、波浪、弹跳和渐变圆环十种。每种都按你选择的尺寸、速度、粗细与颜色生成，可直接复制 HTML 加 CSS 使用。
加载动画需要 JavaScript 或图片吗？
不需要。每个加载器都是普通 HTML 元素加 CSS 关键帧动画，没有图片、图标字体、依赖库，也不需要任何运行时脚本——只要那段 CSS 就够了。
怎么把加载器加到网站上？
在网格中点击某个加载器，然后把 HTML 块复制到页面中需要显示的位置，再把 CSS 块粘贴进样式表。CSS 完全自包含，已包含所需的 @keyframes 规则。
四个参数分别控制什么？
「尺寸」控制所有加载器的宽高，「速度」改变动画时长，「粗细」影响边框和竖条宽度，「颜色」会即时重绘整个网格和代码输出中的所有元素。
复制过去的加载器为什么不动？
最常见原因是只复制了类规则而没有复制 @keyframes 块，或者改了 HTML 里的类名却没改 CSS。按生成结果同时复制两段代码，并保持类名不变即可。
这些动画性能如何？
很好。所有加载器只动画 transform 和 opacity，浏览器可以在 GPU 上合成，不触发布局和重绘，同一页面放多个加载器也能保持流畅。
加载动画对无障碍友好吗？
加载图标属于视觉装饰，屏幕阅读器需要文字提示。可以在加载器附近加一个视觉隐藏的「加载中」文字，或给加载器加 aria-hidden="true" 并另行播报进度。
数据会上传到服务器吗？
不会。生成器完全在浏览器中运行，你的设置不会离开页面，生成的代码也在本地设备上拼装。
如何使用CSS 加载动画生成器
CSS 加载动画生成器用纯 CSS 构建动画加载图标——不用图片、不用 JavaScript、零依赖。十种样式任选，实时调整尺寸、速度、粗细与颜色，然后把生成的 HTML 和 CSS 直接复制进你的项目。
- 用四个控件调整全局参数：「尺寸」决定每个加载器的盒子大小，「速度」改变动画时长，「粗细」控制边框与竖条宽度，「颜色」给所有元素上色。
- 在网格中浏览：十种加载器都会按当前设置实时动画，方便一目了然地对比。点击任意加载器即可选中。
- 详情面板会放大显示选中的加载器，并给出对应的 HTML 片段与完整 CSS（包括所需的 @keyframes）。
- 按「复制 HTML」或「复制 CSS」分别把两段代码送入剪贴板。CSS 完全自包含，粘进样式表，再把 HTML 放到需要显示加载器的位置即可。
- 修改任意参数，网格、详情预览和两段代码都会即时更新。
纯 CSS 加载器几乎没有带宽开销，在任何屏幕上都不会模糊。为了无障碍建议配一段文字说明；动画时长别低于约 0.5 秒——闪得太快的加载图标让人焦虑而不是安心。
相关工具
- CSS压缩器 免费在线CSS压缩工具。即时压缩和优化CSS代码，移除空白、注释和多余字符。减小文件体积，提升网页加载速度。
- CSS格式化工具 即时格式化和美化CSS代码，将压缩的CSS转换为可读的、缩进良好的代码，支持自定义选项。
- 创意圆角生成器 免费在线创意圆角生成器。拖拽 8 个手柄或选择 blob 预设，快速创建有机 CSS 形状并复制 border-radius 代码。
- 颜色转换器 免费在线颜色转换器。即时转换 HEX、RGB、HSL、HSV 格式，带可视化拾色器。100% 隐私保护，浏览器本地运行。
- CSS 缓动函数生成器 免费在线 CSS 缓动生成器。在交互曲线上拖拽 cubic-bezier 控制点，内置 18 种预设，小球循环动画实时对比，一键复制 timing function。
- CSS 文字阴影生成器 免费在线 CSS text-shadow 生成器。多层阴影可调偏移、模糊、颜色与透明度，内置霓虹、3D、复古、光晕等预设，实时预览并一键复制代码。
- CSS clip-path 裁剪生成器 免费在线 CSS clip-path 生成器。支持 polygon、circle、ellipse、inset 四种模式，顶点可拖拽，实时预览并一键复制 CSS 代码。
- CSS圆角生成器 可视化CSS圆角生成器，独立调整每个角的圆角半径，实时预览并即时复制生成的CSS代码。