CSS 加载动画生成器（Loading 转圈）

CSS 加载动画不需要 GIF 或 JavaScript 库，就能表示“正在处理”：几行 HTML 加一段关键帧动画，浏览器会在合成器线程上流畅运行。这个生成器可按你设定的颜色、大小、粗细和速度写出七种常见样式——圆环、双圆环、弹跳圆点、条形、脉冲、涟漪和 12 条线的分段转圈，并附带无障碍状态标签和“减少动态效果”规则。预览是用同一段 CSS 绘制的动态 SVG。

使用方法

1. 选择加载动画类型。
2. 设置颜色（圆环还要设置轨道颜色）、大小、粗细和一个周期的时长。
3. 如果 "loader" 与你自己的 CSS 冲突，请修改类名。
4. 把 HTML 复制到需要显示加载动画的位置，把 CSS 复制到你的样式表。

计算公式

ring: border-top in the color, other borders in the track color, rotate(360deg) every cycle · dots: size ÷ 4 per dot, gap = size ÷ 8, delays −0.32 and −0.16 of a cycle · segments: 12 lines rotated 30° apart, each fading one twelfth of a cycle after the last

只对 transform 和 opacity 做动画，浏览器无需重新排版页面即可运行。负延迟让每个部分从周期中途开始，所以加载动画从第一帧起就像在运动。

示例

默认值生成一个 48 px 的圆环，带 6 px 的 #e5e7eb 轨道和 #2563eb 的圆弧，每秒转一圈：border: 6px solid #e5e7eb; border-top-color: #2563eb; animation: loader-ring 1s linear infinite;。48 px 的弹跳圆点使用三个 12 px 的圆点，间距 6 px；周期为 1.5 秒时，延迟分别为 −0.48 秒和 −0.24 秒。