纯 css3 实现圆环 loading 动画完全可行：border + rotate 适合无限旋转场景，需设 border-radius: 50%、单边着色及 animation: spin 1s linear infinite；svg + stroke-dasharray 才能精确控制进度，配合 js 动态更新 stroke-dashoffset 实现 0%→100% 加载感。
纯 CSS3 实现圆环 Loading 动画完全可行，且性能好、体积小、无需 JS 干预。关键不在“能不能”，而在于选对方案——border + transform: rotate() 适合基础旋转效果；svg + stroke-dasharray/stroke-dashoffset 才能真正控制进度、实现“从0%到100%”的加载感。
用 border + rotate 做最简旋转圆环
这是入门最快的方式，本质是画一个带缺口的圆环，再让它匀速转起来。适合“无限加载中”场景，不体现具体进度。
-
border-radius: 50%是必须的，否则得不到正圆环 - 必须设置至少三边为透明或背景色（如
border: 16px solid #f3f3f3），只留一边有色（如border-top: 16px solid #007bff），才能形成“弧段”视觉 -
animation要配linear缓动，否则旋转会卡顿；infinite不可少，否则只转一圈就停 - 注意
transform-origin默认是50% 50%，但若容器有padding或margin影响定位，需显式重设
示例关键样式：
.loader {
width: 60px;
height: 60px;
border: 6px solid #eee;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
<p>@keyframes spin {
to { transform: rotate(360deg); }
}
</p>
用 SVG + stroke-dasharray 控制真实进度
当需要和 JS 交互（比如 Axios 请求完成时停止动画）、或要显示 30%、75% 这类具体数值时，border 方案立刻失效——它只能转，不能“填”。这时必须切到 SVG。
-
<circle></circle>的r决定半径，cx/cy定义中心；总周长 =2 * π * r，这个值就是stroke-dasharray的基准 -
stroke-dasharray: 100, 100表示“实线100 + 空白100”循环；设为100, 0就是实心圆环；设为0, 100就完全不可见 -
stroke-dashoffset是起点偏移量：值越大，圆环“未绘制”部分越多；从最大值减到 0，就实现了“从无到满”的加载动画 - CSS 动画无法直接绑定 JS 变量，所以动态进度必须靠 JS 修改
style.strokeDashoffset，但动画本身仍由 CSStransition驱动
示例 SVG 结构：
<svg width="120" height="120" viewbox="0 0 120 120"><circle cx="60" cy="60" r="50" fill="none" stroke="#eee" stroke-width="8"></circle><circle cx="60" cy="60" r="50" fill="none" stroke="#007bff" stroke-width="8" stroke-dasharray="314" stroke-dashoffset="314"></circle></svg>
JS 控制时只需：circle.style.strokeDashoffset = 314 - (percent / 100) * 314
常见卡点与兼容性提醒
看似简单，实际部署常翻车：
- Chrome/Firefox/Safari 对
@keyframes和transform支持已很稳定，但旧版 Edge（≤18）需加-webkit-前缀；现在基本可忽略，除非项目明确要求支持 IE11 -
border圆环在高 DPR 屏幕（如 MacBook Retina）上容易出现锯齿，建议用 SVG 替代 - 动画卡顿往往不是代码问题，而是父容器触发了
will-change: transform缺失，或同时运行多个transform动画导致重绘压力大 - 别在
:hover上直接写animation，会导致鼠标反复进出时动画重复触发；应改用transition+ 切换 class 控制启停
真正难的不是写出第一个旋转圆环，而是想清楚：这个 Loading 是“永远转下去”，还是“转到某进度就停”。前者用 border + rotate 一行搞定；后者必须引入 SVG，并预留 JS 接口。选错路径，后期补救成本远高于起步多花两分钟想清楚需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
