移动端环形进度条必须用SVG+stroke-dasharray，禁用conic-gradient；需JS调用getTotalLength()获取真实周长并设为stroke-dasharray和初始stroke-dashoffset，再动画至0，否则缩放或跨平台时错位、白屏或卡顿。
stroke-dasharray 和 conic-gradient 都能做，但选错方案会白屏、卡顿或动不了——得先看运行环境和更新方式。
SVG + stroke-dasharray 动态更新必须用 getTotalLength()
硬算周长（比如 2 * Math.PI * 50）在缩放、高DPI屏或 viewBox 变化时会偏移，导致进度条只转一半、跳变或不动。真实渲染周长只能靠 JS 获取：
const circle = document.querySelector('circle');-
const circumference = circle.getTotalLength();—— 必须等 SVG 渲染完成后再调，否则返回0 -
stroke-dasharray设为circumference，stroke-dashoffset从circumference动画到0 - 动画必须加
will-change: transform或transform: translateZ(0)，否则 Android WebView 和旧版 iOS Safari 明显掉帧
conic-gradient 在微信小程序里根本无效
不是兼容性问题，是基础库不识别该函数名——样式静默失效，控制台无报错，真机上进度条空白或显示纯色块。常见误判场景：
- H5 端正常，小程序预览也正常（开发工具模拟层有支持），但真机调试白屏
- 用
uni.createSelectorQuery()拿不到background值，返回空字符串 - 第三方 UI 库（如 uView 的
u-circle）若没做平台判断，内部用了conic-gradient，小程序端直接挂
纯 CSS 双半圆方案要小心 overflow 和旋转层级
左右两个半圆容器各自 overflow: hidden，内层圆靠 transform: rotate() 暴露弧段。容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 指示器（数字/图标）不能塞进任何旋转容器里，否则会跟着偏移；必须放在最外层，用
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)居中 - 左半区父容器宽度必须是直径的一半，且
position: absolute+overflow: hidden缺一不可 - 别把
rotate()加在进度色块上——数字或图标会翻转；应旋转遮罩层，底层色环固定
移动端响应式必须用 aspect-ratio 而非固定宽高
写死 width: 160px; height: 160px 在 iPhone SE 和 iPad 上会失真。正确做法：
- 外容器设
aspect-ratio: 1，再配max-width: 100%保证缩放 - CSS 变量（如
--p: 0.75）控制进度，避免 JS 频繁操作 style - clip-path 裁剪用
inset(calc(50% - 50% * var(--p)) round 50%)，注意括号包裹整个 calc 表达式，否则解析失败
真正麻烦的不是怎么画圆，而是不同平台对同一段 CSS 的解释差异——小程序不认 conic-gradient，iOS Safari 对 stroke-dashoffset 动画有节流，Android WebView 不触发 GPU 加速就卡。方案选错，调试半天发现只是平台限制。
