纯css圆形进度条通过旋转遮罩层实现视觉欺骗，核心是transform: rotate()控制遮罩角度，指示器需绝对定位居中且脱离旋转流，动画仅用transform避免重排，响应式采用aspect-ratio和css变量适配主题与尺寸。
用 transform: rotate() 配合 clip-path 或遮罩层实现圆形进度条
纯 CSS 圆形进度条本质是「视觉欺骗」：不是真的绘制弧线，而是旋转一个半圆遮罩，露出底层色块。关键在控制旋转角度与进度映射关系，transform: rotate() 是核心，但直接旋转变量色块会翻转内容，所以更稳妥的是旋转遮罩层。
常见错误是把 rotate() 直接加在进度色块上——结果数字或图标跟着转，UI 错乱；或者用 stroke-dasharray 搞 SVG，但 SVG 在响应式缩放时容易失真，且不便于动态绑定数值。
- 推荐结构：外容器
position: relative，内部两层 —— 底层固定色环（border或伪元素），上层遮罩（position: absolute+overflow: hidden） - 遮罩层内再放一个旋转的半圆块，旋转角度 =
180deg + (value / max) * 360deg（注意起始方向） - IE 不支持
clip-path圆形，但遮罩层方案兼容到 Edge 16+
指示器（数字/图标）如何精准居中且不随旋转偏移
指示器必须脱离旋转流，否则会被遮罩层带着转。最简方案是把它放在最外层容器里，用 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 居中 —— 这样它完全独立于任何旋转逻辑。
容易踩的坑：有人把指示器塞进遮罩层内部，结果每次更新进度，数字位置飘忽；或者用 transform: rotate() 反向抵消，徒增计算负担和精度误差。
立即学习“前端免费学习笔记（深入）”；
- 指示器文本建议用
font-size: clamp(1rem, 4vw, 1.5rem)保证缩放一致性 - 如果需要带单位（如
%），不要写死在 HTML 里，用::after伪元素 +content，方便 JS 动态更新数值时只改data-value - 避免给指示器设
z-index，除非遮罩层用了z-index且层级混乱 —— 默认文档流足够
进度值变化时动画卡顿或跳变的原因和修复
卡顿通常不是因为 CSS 太重，而是动画触发了 layout（重排）。比如用 width/height 或 top/left 做进度，浏览器必须反复计算盒模型；而 transform 和 opacity 是合成层友好属性，GPU 加速有效。
另一个常见问题是用 % 单位写旋转角度（如 rotate(75%)），这是非法语法，浏览器静默失败，进度不动。
- 务必用
deg单位：rotate(270deg)，不是rotate(75%) - 动画声明写在遮罩层上，且只包含
transform：transition: transform 0.3s ease-out - 如果 JS 频繁更新进度（如每帧），改用
requestAnimationFrame节流，避免连续触发动画重绘
适配不同尺寸和深色模式的最小改动方案
圆形进度条的直径往往由容器宽高决定，硬写 width: 120px 会导致响应式断裂。真正可靠的方案是让容器用 aspect-ratio: 1，内容自动等比缩放。
深色模式下，底环颜色容易和背景融掉，但又不能简单换 color-scheme: dark —— 因为它只影响表单控件，对自定义环无效。
- 用
@media (prefers-color-scheme: dark)单独覆盖底环和遮罩层的background-color或border-color - 避免用
hsl()或rgb()写死颜色，改用 CSS 自定义属性：--ring-bg: #e0e0e0，方便主题切换时批量替换 - 如果项目已用 CSS-in-JS 或 Tailwind，优先提取为变量，而不是在每个组件里重复写媒体查询
最难调的其实是小尺寸下的指示器可读性 —— 12px 字体在 40px 直径的环里几乎看不清，这时候宁可隐藏数字，只留环，或者用 scale 动态放大，而不是强行撑大容器。
