CSS 加载动画生成器
生成带自定义尺寸、颜色和速度的 CSS 加载转圈、圆点、条形、圆环或脉冲动画，实时预览并复制可直接粘贴的 HTML 与 CSS。
正在加载工具…
CSS 加载动画生成器 — 选择加载动画样式，设置尺寸、颜色和动画速度，即可在实时预览中看到动画效果，同时自动生成包含 @keyframes 的可直接粘贴 HTML 与 CSS 代码。还能微调转圈和圆环的线条粗细，以及圆点或条形的数量。一切都在你的浏览器中完成，任何设置或代码都不会发送到服务器。
CSS 加载动画生成器 是什么？
CSS 加载动画生成器是一款免费的浏览器内工具，专为需要纯 CSS 加载指示器而又不想引入库的网页设计师和前端开发者打造。你可以从转圈、圆环、圆点、条形和脉冲五种样式中选择，然后控制以像素为单位的尺寸、主色、单次动画周期的秒数、线条粗细以及圆点或条形数量。编辑时实时预览会同步播放动画，对应的 HTML 标记和带 @keyframes 的 CSS style 样式块也会即时更新，可直接放入页面。可用于按钮、页面加载器、骨架屏和异步占位，或学习 CSS 动画与 @keyframes 如何驱动每种效果。
如何使用 CSS 加载动画生成器
- 选择加载动画样式：转圈、圆环、圆点、条形或脉冲。
- 设置以像素为单位的尺寸，并用色块选取或手动输入颜色。
- 设置单次完整动画周期的秒数（速度）。
- 打开“设置”调整线条粗细（转圈和圆环）或圆点、条形的数量。
- 观看实时预览播放动画，然后用复制按钮复制生成的 HTML 与 CSS。
示例
经典转圈
输入
样式：转圈，尺寸 48px，颜色 #4f86f7，速度 1s，粗细 5px
输出
.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }三个弹跳圆点
输入
样式：圆点，尺寸 48px，颜色 #9333ea，速度 1s，数量 3
输出
<div class="dd-loader"><div></div><div></div><div></div></div>，各圆点带错开的 animation-delay，从而呈波浪式缩放。
伸缩条形加载
将样式切换为条形并把数量提高到 5，即可得到类似均衡器的指示器，每根条形以轻微延迟上下伸缩，很适合放在“加载中…”文字旁边。
常见问题
- 有哪些加载动画样式？
- 五种：转圈（旋转的弧线）、圆环（更粗的旋转圆环）、圆点（波浪式缩放的圆点）、条形（上下伸缩的条形）和脉冲（单个脉动的圆）。用样式菜单切换，预览和代码会即时更新。
- 尺寸、颜色和速度控件有什么用？
- 尺寸设置加载动画的像素大小，颜色设置主色（用色块选取或输入任意 CSS 颜色），速度是单次动画周期的秒数。粗细控制转圈和圆环的线条，数量控制显示多少个圆点或条形。
- 生成的是不含 JavaScript 的纯 CSS 吗？
- 是的。代码是普通 HTML 加上使用 CSS 动画和 @keyframes 的 <style> 块，因此无需任何 JavaScript 或外部库即可运行。粘贴到页面中即可自行工作。
- 为什么粗细和数量不影响所有样式？
- 粗细只影响转圈和圆环（它们绘制边框），数量只影响圆点和条形（它们渲染多个元素）。其他样式会忽略这些设置，因此你所选样式的输出保持简洁。
- 有任何内容会上传到服务器吗？
- 不会。加载动画及其 CSS 完全在你的浏览器中通过本地字符串运算构建——任何设置、颜色或代码都不会发送到服务器，因此它可离线使用并为你的工作保密。