css方案最稳，因其动画走渲染层硬件加速、不触发重排重绘、帧率稳定；canvas在uni-app中全量重绘、多实例易卡顿白屏、兼容性差且存在内存泄漏风险。
直接用 CSS 实现最稳，Canvas 容易卡顿、错位、内存泄漏，SVG 在小程序里事件和动画支持弱；除非你要渐变色或刻度线，否则别碰 Canvas。
为什么 CSS 方案比 Canvas 更适合加载动画
CSS 动画走的是渲染层硬件加速，transform: rotate 不触发重排重绘，帧率稳定；Canvas 在 uni-app 里每次 ctx.draw() 都是全量重绘，H5 和小程序行为不一致（比如 H5 要 $nextTick，小程序得加 setTimeout(..., 16)），列表里多个进度条时极易卡顿甚至白屏。
- Canvas 的
canvas-id必须字符串，不能用ref或动态拼接失败的变量 - 小程序端
canvasToTempFilePath在 H5 不回调，导致导出进度图功能直接失效 - 低端安卓机上
ctx.setLineWidth(8)可能被忽略，线条细得看不见 - CSS 方案只靠 class + 内联 style 控制，改颜色、粗细、大小全是纯样式，无 JS 逻辑耦合
纯 CSS 圆形进度条怎么写（左右半圆接力法）
核心是用两个 view 分别控制左/右半圆旋转，通过 overflow: hidden 和 rotate 露出底下的彩色圆环。进度 ≤50% 时只转右半圆；＞50% 后右半圆停在 180°，左半圆开始转。
- 外层容器设
width/height相等，border-radius: 50% - 背景圆环用
border实现，比如border: 8px solid #eee - 进度圆环拆成左右两个
view，每个宽为容器一半，overflow: hidden - 每个半圆内再套一个
view，设相同border但颜色不同，初始旋转角度按进度算：rightRotate = progress * 180（≤50%），leftRotate = (progress - 50) * 180（＞50%） - 动画用
transition: transform 0.3s ease-out，避免用linear导致跳变
uni-app 里容易漏掉的兼容细节
微信小程序和 H5 对 transform-origin 解析不一致，iOS 微信 WebView 里默认原点偏移，导致旋转中心不对；H5 下 vh/vw 单位在某些机型缩放异常；App 端字体抗锯齿开关影响圆弧边缘平滑度。
- 必须显式设
transform-origin: center center，不能依赖默认值 - 尺寸别用
%或vw，统一用rpx或固定px值（比如width: 120rpx; height: 120rpx） - 圆环粗细用
border-width，别用box-shadow模拟，后者在小程序里渲染模糊 - 文字居中用
position: absolute+top: 50%; left: 50%; transform: translate(-50%, -50%)，不用 flex（小程序 flex 对齐不稳定）
真正麻烦的不是画圆，而是让旋转角度和百分比严格对应——尤其在进度突变（比如从 10% 直跳 90%）时，CSS 动画会插值错误，得手动重置 transform 并加 transition: none 瞬间跳转再恢复。这个细节几乎没人提，但真上线后用户一眼就能感觉到“卡了一下”。
