Softonic

按钮加载动画 CSS 生成器

步 1 / 2
下一步

按钮内的加载动画会告诉用户，他们的点击已经生效，并且不需要再次点击。在这里生成一个小而细的圆环，然后复制 CSS，把它放在按钮文字旁边。

如何制作按钮加载动画

  1. 1

    使用较小的尺寸

    在尺寸栏中输入 16 或 18，让圆环与按钮文字的高度相配。

  2. 2

    让圆环变细

    将粗细设为 2，使弧线在这个尺寸下依然清晰。

  3. 3

    匹配颜色

    选择转动弧线的颜色，例如深色按钮上用白色。

  4. 4

    稍微加快并复制

    尝试每圈 0.8 秒，然后复制 CSS。

一个实际示例

假设你有一个深蓝色的“保存”按钮，文字为白色。在生成器中输入尺寸 16、粗细 2、颜色 #ffffff、速度 0.8。工具会生成：

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

圆环轨道是固定的浅灰色，在深色按钮上依然清晰可见。如果你想要更柔和的轨道，可以在粘贴的 CSS 中把 #eee 改为半透明值，例如 rgba(255, 255, 255, 0.3)。弧线颜色保持你选择的颜色。

放在按钮内部

把加载动画元素放在文字之前，并将按钮设为弹性布局，使两者在同一行并保持间距：

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="正在保存"></span>
  正在保存
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

只在请求进行期间添加加载动画和 disabled 状态，请求完成后同时移除它们。禁用按钮的作用是阻止重复提交，而加载动画则是说明原因的提示。

按钮的尺寸与粗细

按钮文字大小 加载动画尺寸 粗细
14 px 14 px 2 px
16 px 16 到 18 px 2 px
18 到 20 px 20 到 24 px 3 px

说明

  • 生成器只生成一个圆形圆环，不会生成按钮，因此你的按钮样式保持不变。
  • 粗细超过直径四分之一的圆环会被填满，看起来像圆盘，所以在小尺寸下请使用较细的数值。
  • 圆环旁边要保留文字标签。没有文字的加载动画，部分用户可能难以理解。

避免布局跳动

如果加载动画出现时按钮突然变宽，布局会发生偏移，用户的点击位置也会移动。有两个简单的解决办法。一是给按钮设置一个最小宽度，足以容纳加载动画和较长的文字。二是从一开始就在文字前放置一个 16 px 的空占位元素，预留出加载动画的空间。由于生成的圆环宽高都是固定的像素值，很容易精确地预留出它所需的空间。

常见问题

大致与按钮文字的高度相当，通常为 14 到 20 像素。这样加载动画出现时，按钮就不会变大。

在大多数表单中应该禁用。禁用可以防止重复提交，而加载动画也向用户说明了为什么其他内容无法点击。

轨道是浅灰色，弧线则是你选择的颜色。在浅色按钮上，请选择更深的弧线颜色，并在粘贴的 CSS 中修改轨道颜色。

不会。生成器只输出圆环的 CSS。是否保留、修改或隐藏文字，由你自己的标记决定。

相关工具

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）之间转换，可自由组合十进制与二进制。

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

使用指南与应用场景