CSS 在线加载动画生成器 - 纯 CSS 转圈效果

CSS 加载动画与转圈效果生成器

这款 CSS 加载动画生成器把 43 款精心制作的预设变成可直接复制的加载效果，让你再也不用从零手写 keyframes。浏览图库，调整颜色、尺寸和速度，然后复制干净的 HTML 和 CSS 用到你的项目里。

它专为需要快速、零依赖加载指示器的前端开发者和设计师打造——无论是转圈、圆点、条形、脉冲、进度条还是动态形状。每款预设都是纯 CSS，不需要 JavaScript，没有图片文件，也无需安装任何库。

隐私优先设计：每一次预览和你复制的代码都完全在你的浏览器中生成。你的任何选择或自定义都不会上传到服务器。

如何生成 CSS 加载动画

浏览并选择加载动画

用类别标签页——全部、转圈、圆点、条形、脉冲、进度条和形状——来筛选图库。每个缩略图都实时播放动画，点击你喜欢的那款，或点随机切换到新的一款。

自定义颜色、尺寸和速度

打开颜色选择器为加载动画设置任意颜色，拖动尺寸滑块在 20px 到 120px 之间调节，把速度（动画时长）设在 0.3s 到 3.0s 之间。每次修改后，实时预览都会立即更新。

在任意背景上检查效果

在浅色、深色和透明背景之间切换预览。棋盘格的透明视图能帮你确认加载动画干净地叠在页面之上，没有多余的背景。

复制 HTML 和 CSS

在 HTML 和 CSS 标签页之间切换，点击复制。CSS 里已经写入了你的确切颜色、像素尺寸和时长，把标记粘贴到页面中、把样式粘贴到样式表里——就完成了。

功能特点

43 款精选加载动画预设

一套精心打造的合集，从简单的旋转圆环到动态 3D 立方体应有尽有，每一款都能直接用于生产环境。

六大加载动画类别

按转圈、圆点、条形、脉冲、进度条或形状筛选，也可在一个图库中查看全部，快速找到合适的样式。

实时动画图库

网格中的每个缩略图都运行真实动画，让你在选定之前就能看到每款加载动画的动态效果。

颜色选择器

为加载动画设置任意颜色以契合你的品牌，一次性应用到动画的每一个部分。

尺寸与速度控制

将加载动画从 20px 缩放到 120px，并把动画时长从快至 0.3s 调到慢至 3.0s。

浅色、深色和透明预览

切换预览背景，确认加载动画在任意页面环境中都清晰可见、干净利落。

HTML 与 CSS 分栏标签页

代码被拆分为精简的标记和样式两部分，让你把每一部分准确粘贴到该去的地方。

可直接上线的输出

生成的 CSS 使用已解析数值——确切的像素、颜色和时长——而非变量，无需额外配置即可粘贴使用。

一键复制

一个按钮即可把当前的 HTML 或 CSS 标签页直接复制到剪贴板，并有清晰的确认提示。

随机切换加载动画

点一下随机，立即在你正浏览的类别内切换到另一款加载动画，快速获取灵感。

纯 CSS，无需 JavaScript

每款加载动画都仅靠 CSS keyframes 运行——没有脚本，也没有图片——因此轻量又快速。

响应式布局

图库、预览和代码面板都会自适应你的屏幕，在桌面端和移动端表现一致。

常见问题

如何用 CSS 制作加载转圈效果？

从图库里挑一款预设，按需调整它的颜色、尺寸和速度，然后把 HTML 和 CSS 标签页的代码复制到你的项目中。只要把标记粘贴到页面、把样式粘贴到样式表里，转圈动画就会立即开始运行。

能不用 JavaScript、只用纯 CSS 做转圈吗？

可以。这里的每款加载动画都完全由 CSS @keyframes 动画构成。你只需要 HTML 标记和 CSS 样式——动画运行不需要任何 JavaScript，也不需要图片文件。

怎么修改转圈的颜色和速度？

使用生成器里的控件：颜色选择器设置加载动画的颜色，速度滑块把动画时长设在 0.3s 到 3.0s 之间。复制之后，你仍可以在 CSS 中直接编辑数值——找到颜色（例如 #6366f1）或以秒为单位的时长，直接改掉即可。

如何让转圈在页面上居中显示？

把加载动画放进一个满高的容器，并使用弹性布局，例如 display: flex; align-items: center; justify-content: center;，并把 min-height 设成你想填充的区域高度。如果要做全屏遮罩，用 position: fixed; inset: 0; 定位该容器，转圈就会停在视口正中。