最简洁的单元素饼图动画方案是用 conic-gradient 配合 css 动画，现代浏览器直接支持；需注意渐变写法、角度控制及变量驱动进度，兼容旧版则选用 border+rotate 方案。
用 conic-gradient + animation 实现单元素饼图动画
现代浏览器（Chrome 84+、Firefox 85+、Safari 16.4+）直接支持 conic-gradient，这是最简洁的方案——无需多个 div、伪元素或复杂 z-index 控制。一个 div + 一行渐变声明就能跑起来。
常见错误是把 conic-gradient 写成 linear-gradient 或漏掉角度断点；还有人误以为必须配合 transform: rotate() 才能动，其实渐变本身就能动画。
-
background必须设为conic-gradient(from 0deg, #2842d8 0%, #2842d8 50%, #f3f3f3 0%, #f3f3f3 100%)—— 注意：后半段用#f3f3f3 0%实现“裁切”效果，不是写成50% 100% - 动画只需改
from角度：@keyframes spin { from { background-position: 0deg; } to { background-position: 360deg; } }，但注意background-position对conic-gradient无效，得用background-image配合rotate()或直接动画background值（部分浏览器不支持） - 更稳妥的做法：用
mask配合conic-gradient，或退一步用transform: rotate()动整个元素（兼容性更好）
用 border + border-radius 搭配旋转（兼容 IE11 及旧版 Safari）
当项目需支持老浏览器时，border 方案仍是首选。原理是利用四边 border 颜色差异 + 圆角 + 旋转，视觉上形成“扇形进度”。
容易踩的坑：border 宽度不一致导致圆环变形；border-top 覆盖顺序被其他 border 干扰；动画卡顿是因为没加 will-change: transform 或没启用硬件加速。
- 元素尺寸必须是正方形，且
width/height与border-width成比例（例如width: 80px; height: 80px; border: 16px solid #f3f3f3; border-top: 16px solid #2842d8;） -
border-radius: 50%必须写在 border 之后，否则圆角失效 - 动画用
transform: rotate()，别用rotateZ()—— 后者在某些安卓 WebView 中不触发硬件加速 - 加
transform: translateZ(0)或will-change: transform可缓解低端机掉帧
动态控制进度值：用 CSS 自定义属性传参
静态动画不够用？想让加载完成时停在 75%，或根据接口返回值实时更新？靠 JS 改 style.setProperty('--p', '75') 就行，前提是 CSS 里用了变量驱动。
别硬编码百分比进 keyframes —— 那样每次改进度都得重写动画规则。变量才是可维护的关键。
- HTML：
<div class="pie" style="--p: 75"></div> - CSS 中用
conic-gradient(from 0deg, #2842d8 0%, #2842d8 calc(var(--p) * 1%), #f3f3f3 0%, #f3f3f3 100%) - 若用 border 方案，可通过
clip-path: polygon(...)或遮罩层模拟进度，但精度不如渐变方案
性能和体积陷阱：别让动画拖慢主线程
看似简单的旋转，实际可能触发 layout → paint → composite 全链路。尤其在移动端，多个 loading 同时跑会明显卡顿。
最容易被忽略的是：动画元素没脱离文档流，或父容器有 overflow: hidden 却没设 contain: layout paint，导致每次 rotate 都重绘大片区域。
- 给动画容器加
contain: strict（支持浏览器中），或至少contain: layout paint - 避免在
:hover或滚动中动态启停动画 —— 触发频繁重排 - SVG 方案虽重，但
<circle stroke-dasharray></circle>动画 CPU 占用更低；CSS 方案胜在零请求、易维护 - 真要极致性能：用
@property声明类型化变量（仅 Chrome/Edge 支持），让浏览器对动画做优化
实际用的时候，先看目标浏览器版本。能用 conic-gradient 就别绕路；要保兼容，border 方案写两遍也比堆七八个 div 清爽。动画停在哪一帧、怎么跟 JS 交互、是否要响应式缩放——这些细节才是真麻烦的地方，不是写个 @keyframes 就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
