纯 css3 环形旋转动画最简实现是用 border-top + border-radius: 50% + @keyframes spin，仅需 width/height 相等、单边有色边框、透明其余边框，配合 linear 无限旋转，轻量兼容且无需 js 或 svg。
用 @keyframes spin 实现最简环形旋转动画
纯 CSS3 环形加载动画的核心就一条：让一个圆环持续旋转。不需要 JavaScript，不依赖 SVG，仅靠 border + border-radius: 50% + animation 就能跑起来。
常见错误是直接对 div 设 border: 4px solid #399 并加 transform: rotate()，结果发现整个元素在转，而不是“环在转”——本质是没把边框变成环形视觉主体。
- 必须设
width和height相等，且border-radius: 50% - 只保留一边 border（比如
border-top），其余设为transparent，才能形成“单色弧线”效果 -
animation: spin 1s linear infinite中的linear比ease更适合加载场景，避免卡顿感
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-ring {
width: 40px;
height: 40px;
border: 4px solid rgba(0,0,0,0.1);
border-top-color: #399;
border-radius: 50%;
animation: spin 1s linear infinite;
}
border 方案 vs SVG 方案的关键取舍
很多人一上来就想用 SVG 的 <circle></circle> 或 <path></path> 配 stroke-dasharray 做进度环，但极简动感场景下反而过度了。
用纯 border 的优势在于：零 DOM 节点、无路径计算、兼容性到 IE10+、动画触发即走；劣势是无法精确控制“已加载 65%”这种进度值——它只是“正在转”，不是“进度环”。
- 要进度反馈 → 选 SVG +
stroke-dashoffset，但需 JS 同步更新属性 - 只要“有动感的等待提示” →
border-top + spin是最轻、最快、最稳的选择 - 移动端注意：避免在
animation中使用box-shadow或多层filter，会触发重绘导致掉帧
让环“动得更聪明”的三个微调参数
同一个 spin 动画，改几个参数就能明显提升质感。这不是炫技，而是用户感知差异的关键。
-
animation-duration: 0.8s比1s更显轻快，但低于0.6s容易让人觉得“闪”而非“转” - 用
animation-timing-function: steps(12)可模拟齿轮式匀速转动（适合科技感 UI），但多数场景仍推荐linear - 加
will-change: transform在现代浏览器中可提前启用 GPU 加速，尤其在低端 Android 上效果明显
容易被忽略的硬件加速陷阱
你以为加了 transform: rotate() 就自动 GPU 加速？不一定。Chrome 和 Safari 对 transform 的加速策略很挑：
- 仅
rotate()、scale()、translate()会被加速；skew()不会 - 如果父容器有
overflow: hidden且子元素超出，可能强制回退到 CPU 渲染 - 最稳妥的写法是补上
transform: rotate(0.001deg)（哪怕只是 0.001 度）来触发硬件层
所以完整声明建议写成：animation: spin 0.8s linear infinite; transform: rotate(0.001deg); will-change: transform;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
