Softonic

CSS 加载动画生成器

步 1 / 2
下一步

CSS 加载动画是一个通过 keyframes 规则不断旋转的圆环。在这里你可以设置旋转速度、预览动画效果，并同时复制类和 @keyframes 代码块。

如何调整动画

  1. 1

    输入速度

    在速度（秒）栏中输入完成一圈所需的秒数，例如 0.8 或 1.2。

  2. 2

    查看预览

    圆环会立即以该速度旋转，方便你判断它给人的感觉是平稳还是急促。

  3. 3

    调整尺寸和颜色

    修改尺寸、粗细和颜色，使动画与它将要出现的位置相配。

  4. 4

    复制 CSS

    复制生成的规则。动画属性与 keyframes 会一起使用。

动画是如何构成的

生成的 CSS 由两个相互配合的部分组成。.loader 上的 animation 属性为动画命名、设置持续时间和时间函数，并指定重复播放：

animation: spin 0.8s linear infinite;

@keyframes spin 规则描述动作本身。它只有一个结束状态，即旋转 360 度。浏览器从元素的正常位置开始，逐步过渡到这个结束状态：

@keyframes spin {
  to { transform: rotate(360deg); }
}

工具中的速度栏对应这里的持续时间。其余部分，包括 linear 和 infinite，保持不变。

选择持续时间

每圈秒数 视觉感受
0.4 到 0.6 快速而忙碌，可能显得紧张
0.8 到 1 平稳，是常用的选择
1.2 到 1.6 舒缓，适合较大的加载动画
2 或更长 迟缓，可能看起来像卡住了

较大的圆环可以比小圆环转得稍慢一些，因为大圆的边缘每秒已经移动了更长的距离。

为什么使用线性时间

工具使用 linear，使圆环在整圈过程中保持相同的角速度。ease-in-out 等缓动曲线会让圆环在每一圈中先减速再加速，对于无限循环的动画来说，看起来会一顿一顿的。如果你仍想要这种效果，请把粘贴的 CSS 中的 linear 改掉。

需要注意的限制

  • 速度为 0 时动画长度为零，圆环不会明显转动。请使用大于 0 的数值。
  • 加载动画始终顺时针旋转。如需反向，复制代码后把结束旋转改为 -360deg。
  • 动画是一次连续的旋转。脉动、弹跳或多步骤的动作需要手动编写额外的 keyframes。

暂停与控制动画

把 CSS 加入页面后，可以使用标准属性控制动画。设置 animation-play-state: paused; 会让圆环停在当前位置，适用于工作已完成但元素仍需显示的状态。设置 animation-delay: 0.2s; 可以推迟开始时间，这样只有在等待时间较长时加载动画才会出现。这些都是普通的 CSS 属性，复制后添加到 .loader 规则中即可。

常见问题

减小速度（秒）栏中的数字。0.6 表示一圈只需 0.6 秒，因此比 1 转得更快。

它表示动画无限重复。如果把它换成 3 这样的数字，圆环转满三圈后就会停止。

可以。需要在两处同时修改名称：类中 animation: 之后，以及 @keyframes 之后。两者必须完全一致。

浏览器可以在不重新计算页面布局的情况下对 transform 做动画，因此这是一种轻量的移动元素方式，即使在性能一般的设备上通常也很流畅。

相关工具

Webpack 配置生成器

为纯 JavaScript、React 或 Vue 项目生成 webpack 5 的 webpack.config.js：支持 TypeScript、Babel、CSS 或 Sass、图片、HtmlWebpackPlugin、开发服务器，并给出 npm install 命令。

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

Protocol Buffers 解码器

在浏览器中解码 hex、Base64、Base64URL、文本或文件中的 Protobuf 线格式字节，准确检查字段候选解释并导出私密报告。

XML 格式化工具

以一致的缩进美化 XML 文档，并精确定位到行号，捕获格式良好性错误。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

文件大小转换器

在字节、KB、MB、GB、TB及IEC二进制单位（KiB、MiB、GiB、TiB）之间转换，可自由组合十进制与二进制。

此工具还提供其他语言版本

使用指南与应用场景