CSS 加载动画生成器
生成一个自包含的 CSS+HTML 加载指示器 — 圆形或脉动点 — 具有自定义颜色、大小和速度。纯 CSS，无需 GIF 或 JS。
输入
一个完整动画周期的长度，以秒为单位（0.2-5）。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-loading-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"loaderType": "ring",
"color": "#3498db",
"size": "40",
"speed": "1"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-loading-animation-generator` tool (CSS Loading Animation Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-loading-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 加载动画生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能说明
CSS 加载动画生成器使用仅 CSS @keyframes 构建一个自包含、即复即用的加载微调器 — 无 GIF、无图像、无 JavaScript 动画库。选择加载器类型、颜色、大小和速度，该工具会输出渲染所需的 HTML 标记和 CSS 规则，在您调整每个控件时即时更新。
为什么 CSS 加载器优于 GIF 和 JS
动画 GIF 加载器和 JavaScript 驱动的加载器曾是默认选择，但纯 CSS 加载器几乎总是更好的选择：
- 文件大小 — GIF 加载器通常包含几千字节的二进制图像数据；CSS 加载器是几百字节的文本，使用 gzip 进一步压缩，并与其余样式表一起缓存。
- 任何尺寸或 DPI 下的清晰度 — GIF 是光栅图像，在缩放或在高密度屏幕上查看时会模糊或像素化。CSS 加载器使用
border、background和transform绘制，因此在任何尺寸下都保持清晰。 - 即时颜色/尺寸更改 — 改变 GIF 的颜色意味着重新导出图像；CSS 加载器的颜色是单一值，您可以主题化、覆盖或按组件变化。
- 无需 JavaScript — 动画完全在 CSS
animation属性和 GPU 加速的transform/opacity属性上运行，即使主线程繁忙也能保持平滑动画 — 正是加载指示器需要工作的时刻。
仅当您需要纯 CSS @keyframes 循环无法表达的内容时，才使用 JS 驱动的动画库 — 基于物理的运动、与实际加载进度同步的动画，或复杂的多阶段序列。对于简单的"正在加载某些内容"指示器，CSS 更简单、更轻量。
加载器类型
- Ring Spinner — 从
border构建的圆形，顶部边缘颜色与其他部分不同，且border-radius: 50%；rotate关键帧动画持续旋转它。这是网络上最容易识别的加载指示器。 - Pulsing Dots — 三个小圆形，按顺序缩放和淡入，每个都具有错开的
animation-delay，使脉动看起来跨越点传播。
使用方法
- 选择加载器类型 — Ring Spinner 或 Pulsing Dots。
- 为加载器选择颜色。
- 调整大小以适应加载器将放置的位置（按钮、卡片、全页覆盖）。
- 设置速度以控制一个动画周期需要多少秒 — 较低的速度更快，较高的速度更慢。
- 将 CSS 块复制到您的样式表，将 HTML 代码段复制到您的标记。两者都完全独立；动画运行不需要其他任何内容。
常见问题
我需要任何额外的库或脚本来使其工作吗？
不需要。所有内容都在 CSS 输出中提供的 CSS @keyframes 规则上运行 — 只需包括 CSS 和 HTML 标记，浏览器会处理其余部分。
我可以在页面上的多个位置重用相同的加载器吗？
可以 — CSS 针对 .io-loader 类，因此相同的规则适用于标记使用的任何位置。如果您在不同的位置需要不同的颜色或大小，请在此处生成变体并重新命名该类（或添加修饰符类），然后再粘贴。
为什么 HTML 包含 role="status" 和 aria-label="Loading"？
这使加载器可被屏幕阅读器访问，屏幕阅读器否则无法知道纯视觉加载器代表加载状态。
此工具是否存储或上传任何内容？ 否。您输入的每个值 — 加载器类型、颜色、大小和速度 — 都在浏览器中本地处理以构建代码段。没有任何内容发送到服务器或保存。