Softonic

CSS 加载动画生成器

步 1 / 2
下一个

旋转图标告诉用户有操作正在进行。这个生成器用纯 CSS 制作一个圆形旋转图标：设置直径、边框粗细、强调色和旋转速度，查看实时预览，然后复制 CSS 代码。全部都是纯 CSS，没有 SVG、没有 JavaScript、也不依赖外部库。

如何使用

  1. 1

    设置尺寸

    旋转图标的直径（像素）。40-80 px 适合大多数按钮和内容区域。

  2. 2

    设置边框粗细

    圆环是画在圆上的边框。边框越粗，弧线越醒目；直径 60 px 时 4-8 px 效果最佳。

  3. 3

    选择颜色

    旋转弧线的强调色。圆环其余部分保持浅灰色，让弧线更突出。

  4. 4

    设置速度并复制 CSS

    每转一圈所需的时间（秒）。1 秒左右是常见的最佳区间；低于 500 毫秒会显得急促，高于 2 秒则显得迟缓。

生成的 CSS 是如何工作的

.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); }
}

旋转图标是一个用粗边框绘制的圆形。border-top-color 规则只把圆环的顶部涂上强调色，所以圆环看起来像一段弧线，@keyframes spin 规则再让它围绕中心旋转。用 transform: rotate() 旋转成本很低，因为浏览器是在合成层上移动元素，而不是逐帧重绘。

要在页面中展示它，添加一个元素并加载 CSS 即可：

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

保证无障碍可用

  • 加上 role="status"，屏幕阅读器才会朗读旋转图标。
  • 用 aria-label 提供状态文字，例如“加载中”。
  • 不要在没有超时兜底的情况下，让旋转图标把内容挡住超过几秒钟。
  • 尊重 prefers-reduced-motion。对于关闭了动效的用户，把旋转动画换成简单的淡入淡出，或一段静态的“加载中…”文字：
@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

何时用旋转图标，何时用乐观式界面

  • 响应 < 100 毫秒：无需旋转图标；人眼几乎察觉不到延迟。
  • 100 毫秒 – 1 秒：用一个不起眼的旋转图标（小圆圈、按钮文字“加载中…”）防止重复点击。
  • 1 秒 – 10 秒：用明显的旋转图标，可测量时最好显示进度。
  • > 10 秒：这已经不是旋转图标能解决的问题了，去查清楚哪里慢并修好它。

对于表单提交和按钮点击，按钮内嵌的旋转图标通常比整页遮罩更合适。

常见问题

简单的单元素旋转图标（四边框旋转技巧）用 CSS。当你需要渐细的拖尾、多段 stroke-dasharray 动画，或看起来像笔刷的填充色块时，用 SVG。CSS 更小更简单；SVG 更灵活。

很可能是因为你在旋转一个较大的元素，或对一个非合成属性做动画。让旋转图标保持小尺寸，使用 transform: rotate()（而不是 top/margin），并避免在其他繁重动画运行时触发它。

几乎都是顺时针。逆时针会让人隐隐觉得别扭，因为大多数现实中的旋转参照物（时钟、风车）都是顺时针的。除非有特别的理由，否则遵循这一惯例。

在 JavaScript 里用 setTimeout(..., 300) 来添加加载器的类，并在操作提前完成时用 clearTimeout 取消它。这样既能避免快速响应时的闪烁，又不会掩盖真正的延迟。

相关工具

ASCII 表参考

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

HTML 字符参考

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

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

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