Softonic

加载动画 CSS 生成器

步 1 / 2
下一步

加载动画可以告诉访客，页面、面板或按钮仍在处理中。在下方设置尺寸、圆环粗细、颜色和速度，查看预览，然后将完成的加载动画 CSS 复制到你的样式表中。

如何获取加载动画 CSS

  1. 1

    选择尺寸

    以像素为单位输入直径。内容区域通常为 40 到 60，行内使用则更小。

  2. 2

    选择粗细和颜色

    以像素设置圆环粗细，并通过颜色选择器选择转动弧线的颜色。

  3. 3

    设置速度

    输入完成一圈所需的秒数。1 是常见的默认值。

  4. 4

    复制 CSS

    使用 CSS 框旁边的复制按钮，并将规则粘贴到你的样式表中。

你将获得什么

生成器会写出两条规则：.loader 类和 @keyframes spin 代码块。该类绘制一个圆形，为它加上浅灰色的圆环，并给圆环的顶部上色。keyframes 让圆形旋转一整圈，而 animation 属性让这个动作无限重复。除此之外不需要任何东西：没有图片文件，没有图标字体，也没有脚本。

使用默认值（60 px、6 px 圆环、#10b981、1 秒）时，输出如下：

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

添加到你的页面

将 CSS 粘贴到样式表中，然后在加载器应该出现的位置添加一个空元素：

<div class="loader" role="status" aria-label="加载中"></div>

在工作进行时显示该元素，内容到达后将其移除，或用 display: none 将其隐藏。role 和 aria-label 属性可以让屏幕阅读器朗读当前状态。

合适的尺寸

放置位置 尺寸 粗细
小按钮内 16 到 20 px 2 px
文字行旁边 20 到 28 px 3 px
卡片或面板 40 到 60 px 4 到 6 px
空白页面中央 60 到 100 px 6 到 8 px

一个经验法则是：粗细约为直径的十分之一。太细在高分辨率屏幕上会显得发虚，太粗则会让圆环变成一团。

注意事项

  • 轨道颜色固定为浅灰色（#eee）。如果背景是深色，请在粘贴的 CSS 中修改这个值。
  • 工具只生成一个圆形加载器。点、条等其他形状需要不同的标记。
  • 如果你的项目中已经有名为 loader 的类或名为 spin 的动画，请在粘贴的 CSS 中重命名它们，以免规则冲突。

显示与隐藏

加载动画应当在工作开始时出现，在工作结束时消失。一个简单的做法是让元素保留 hidden 属性，并在请求开始时移除它。如果等待通常很短，可以在显示圆环之前加入几百毫秒的小延迟，这样即时响应时就不会闪现加载动画。无论选择哪种方式，出错时都要隐藏加载动画，否则访客会一直等待一个已经失败的操作。

常见问题

可以。输出是普通的 CSS，只包含一个类和一条 @keyframes 规则，因此可以放在任何样式表或 style 代码块中，与任何后端都兼容。

默认将元素隐藏，请求开始时再显示，请求结束后重新隐藏。你可以在自己的代码中通过切换类或 hidden 属性来控制。

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

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

使用指南与应用场景