CSS 加载器与转圈生成器，免费

驱动你的加载动画的 CSS 动画的简史

本生成器输出的 @keyframes 规则和 animation 简写定义在 CSS Animations Module Level 1 中。第一份 W3C 工作草案于 2009 年 3 月 20 日 发布,该规范最终在 2018 年 12 月 11 日 达到 W3C 推荐标准,九年之后。到那时,每个发货的浏览器已经支持该语法多年:Safari 4(2009 年 6 月) 使用 -webkit- 前缀,Firefox 5(2011 年 6 月),Internet Explorer 10(2012 年 10 月),以及 2015 年 4 月 Chrome 43 无前缀支持。CSS Animations Module Level 2 是当前的工作草案,通过 animation-timeline 添加了 由滚动驱动 的动画(Chrome 115,2023 年 7 月发货;Safari 和 Firefox 在 2024 年底跟进)。「spinner」预设中的旋转来自 CSS Transforms Module Level 1,这是一个独立的规范,自 2019 年 2 月以来一直处于候选推荐状态,但已被普遍发货:在 @keyframes 块内 100% 处的 transform: rotate(360deg) 是让环旋转的内容。

无障碍不是可选的:「减少动态效果」偏好

自 2014 年以来发布的每个操作系统都内置了「减少动态效果」无障碍设置:macOS「减弱动态效果」(在「辅助功能」→「显示器」中),iOS「减弱动态效果」,Windows「显示动画」,Android「移除动画」,GNOME「启用动画」关闭。prefers-reduced-motion 媒体查询(定义在 Media Queries Level 5,W3C 首个公开工作草案 2017 年 11 月)让你的 CSS 检测此偏好并停止加载动画。始终将任何加载动画包装在:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

WCAG 2.1 成功标准 2.3.3「来自交互的动画」(AAA 级,W3C 推荐 2018 年 6 月 5 日) 要求任何由交互触发的运动动画都可以被禁用,除非该运动是必要的。加载动画很少是必要的。WCAG 2.2(2023 年 10 月)继承了相同的规则。

对于屏幕阅读器,将加载动画包装在 <div role="status" aria-live="polite"> 中,带有视觉隐藏的「加载中…」文本。当加载完成时,替换内容;实时区域向辅助技术宣布「已加载」,而不会大声喊叫。在加载时在包含区域上设置 aria-busy="true",之后设置 aria-busy="false"。此模式记录在 W3C ARIA Authoring Practices Guide 实时区域章节中。

为什么 CSS 加载动画在 60 fps 时保持流畅

现代浏览器渲染管线有三个阶段:布局(计算位置)、绘制(填充像素)和 合成(在 GPU 上组合层)。transform 和 opacity 属性是唯一两个跳过布局 和 绘制并纯粹在合成线程上运行的属性。在任何帧率下,对它们进行动画基本上是免费的。对 width、height、top、left、margin,或任何改变盒子模型的东西进行动画,会强制每帧执行完整的布局和绘制传递,并在低端设备上迅速降至 60 fps 以下。因此,本生成器中的每个预设 只 动画 transform 和 opacity。如果你需要给浏览器一个提示,will-change: transform(定义在 CSS Will Change Module Level 1,W3C 候选推荐 2022 年 4 月 26 日)将元素提升到自己的合成层;请节制使用,因为每个层都消耗 GPU 内存。

什么时候加载动画是正确答案,什么时候不是

在 Response Times: The 3 Important Limits(1993 年,2014 年重述)中,Nielsen Norman Group 的 Jakob Nielsen 定义了三个感知阈值:0.1 秒是「瞬间」、1 秒是不间断思维流的极限、10 秒是保持用户注意力的极限。将你的加载策略映射到这些阈值:

• 不到 1 秒:没有指示器。闪烁 300 毫秒的加载动画比没有加载动画更糟糕:眼睛将闪烁记录为故障。
• 1 到 5 秒:不确定的加载动画或理发店式条形。告诉用户「有事情发生」而不承诺持续时间。
• 5 到 10 秒:带有百分比的确定 <progress max="100" value="42">。当用户能看到进度时,他们更能忍受漫长的等待。
• SPA 路由导航:骨架屏(模仿最终布局的灰色占位框)感觉比加载动画更快。Luke Wroblewski 在 2013 年 3 月的 Mobile First Patterns 帖子中创造了这个术语;Facebook 的「shimmer」(2014)和 Google 的 Material 2(2018 年 5 月)使其成为主流。

缓动函数及每个函数的感觉

animation-timing-function 属性(以及 CSS Easing Functions Module Level 1,候选推荐 2022 年 12 月 6 日)选择值如何在关键帧之间进展:

• linear,恒定速率。适合连续旋转;不适合任何减速到最终状态的东西。
• ease、ease-in、ease-out、ease-in-out,常见三次贝塞尔曲线的关键字别名。浏览器默认为 ease。
• cubic-bezier(x1, y1, x2, y2),带有 [0, 1] 中四个浮点数的自定义曲线。cubic-bezier(.25, .1, .25, 1) 是标准的「ease」曲线。尝试 cubic-bezier(.68, -.55, .27, 1.55) 获得「过冲」反弹效果。
• steps(n, jump-end),离散跳跃,非常适合不进行插值切换状态的点加载动画。

常见错误

• 发布没有 prefers-reduced-motion 的加载动画。有前庭障碍、偏头痛触发器或注意力敏感的用户会被网络上每个旋转的环击中。修复是两行 CSS。
• 忘记 role="status" 和视觉隐藏文本。仅视觉旋转的加载动画对屏幕阅读器用户毫无意义。
• 每个周期低于 0.5 秒的动画速度。在 0.3 秒内完成的加载动画感觉狂热,对许多用户来说像「错误」。每个周期 1 到 1.5 秒是舒适的范围。
• 动画化布局属性。动画化 width、margin 或 top 会引起布局抖动。坚持使用 transform 和 opacity。
• 为每个操作显示加载动画。如果数据在 100 毫秒内到达,加载动画会闪烁并被读取为故障。使用一个在成功时清除的 setTimeout 将加载动画延迟 200 到 300 毫秒。
• 忘记居中加载动画。因为容器不是 flex/grid 容器,`.spinner` 漂浮在节的左上角是第二常见的视觉错误。

更多常见问题

这些加载动画能在旧浏览器上运行吗?

所有现代浏览器(Chrome 43+、Firefox 16+、Safari 9+、Edge 12+)支持 @keyframes 和 transform,无需任何前缀。Internet Explorer 10 和 11 在某些地方需要 -ms- 前缀,但其他方面可以工作。IE 9 及更低版本 没有 CSS 动画支持:回退到动画 GIF,或使用 @supports (animation: spin 1s) 进行特性检测。

当内容加载时,如何停止加载动画?

要么从 DOM 中删除元素,要么用 display: none 或 hidden 属性隐藏它,要么用 animation-play-state: paused 暂停动画。如果你可能再次显示它,暂停是最便宜的。如果你使用了 ARIA 模式,还要在容器上设置 aria-busy="false" 并用已加载状态公告替换加载文本。

我能比拾色器允许的更进一步自定义加载动画颜色吗?

可以。输出 CSS 使用常规的 hex / rgb / hsl 值;用 CSS 变量(var(--brand-primary))替换它们,这样加载动画就会遵循你的设计系统。对于双色加载动画,编辑 border-color 简写:border-color: var(--brand) transparent transparent transparent 给出经典的「四分之一弧」外观。

为什么不用 SVG 或 Lottie 动画?

CSS 加载动画重量低于 200 字节,无需额外请求,无需 JavaScript 运行时,并在任何外部资源加载之前渲染。SVG 适合复杂形状;Lottie 适合从 After Effects 创建的设计师动画。对于通用的「某些东西正在加载」指示器,CSS 是正确完成工作的最便宜工具。

是否有任何东西被跟踪或发送到服务器?

没有。生成器完全在你浏览器的 JavaScript 中运行。你的颜色选择、大小调整和复制的 CSS 永远不会离开页面。在 DevTools 的网络选项卡中验证。