2026前端避坑指南：死磕CSS3双半圆进度条，拒绝JS也能丝滑动效

2026前端避坑指南：死磕CSS3双半圆进度条，拒绝JS也能丝滑动效

• 2026前端避坑指南：死磕CSS3双半圆进度条，拒绝JS也能丝滑动效
  • 先别急着写代码，咱们聊聊这俩半圆到底怎么"打架"
  • HTML结构：大道至简，三个div走天下
  • CSS魔法：让这两个半圆听话地转起来
  • 空心圆环的秘密：中间挖个洞就完事了
  • 动效调教：怎么转才不会像抽风
  • 真实世界的翻车现场
    • Safari的1px毛边惨案
    • 动态修改时的闪烁黑线
    • transform坐标系错乱
  • 让同事喊666的骚操作
    • 技巧一：空心实心一键切换
    • 技巧二：阴影提升质感
    • 技巧三：JS只改一个class
    • 技巧四：封装成Mixin
  • 这方案到底香不香？
  • 最后的碎碎念

2026前端避坑指南：死磕CSS3双半圆进度条，拒绝JS也能丝滑动效

说实话，我到现在还记得三年前那个暴雨夜。老板拍着我肩膀说："小王啊，这个圆形进度条，不要搞那些花里胡哨的SVG，也不要Canvas，就用纯CSS，要轻量，要优雅，要丝滑。"我当时年轻啊，以为就是个圆环嘛，能有多难？结果这一脚踩进去，直接让我怀疑人生到凌晨三点。

市面上搜出来的教程，十个有九个是教你用SVG的stroke-dasharray，剩下那个是Canvas画弧。我就奇了怪了，CSS3明明有border-radius，有transform，有clip，怎么就没人好好讲讲"两个半圆拼圆环"这种原生方案？难道大家都觉得这种写法太野路子，上不了台面？

今天必须把这事掰扯清楚。不是为了炫技，就是单纯咽不下这口气。而且我发誓，这次一定要写得比那些AI生成的教程像人话——毕竟当年被坑的时候，看着那些"首先我们需要创建一个容器"的八股文，我真的想把键盘砸了。

先别急着写代码，咱们聊聊这俩半圆到底怎么"打架"

很多人一看到圆形进度条就怂，觉得要什么三角函数、弧度计算。其实吧，真没那么玄乎。核心思路土得掉渣：左边藏一个半圆，右边藏一个半圆，让它们转起来互相遮挡，露出来的部分就是进度。

想象一下，你手里有两个半圆形的饼干，把它们背靠背拼在一起，正好是个圆。现在左边的饼干固定不动，右边的饼干开始顺时针转。当右边转到180度时，它正好把左边完全盖住，这时候进度就是50%。如果继续转，右边的饼干会跑到左半边去，这时候就需要左边那个"卧底"出来接力了。

这逻辑听起来像不像两个人在抢椅子？前50%右边那个人疯狂表演，后50%换左边的人上场。这就是为什么纯CSS方案处理0-50%和50-100%要用两套逻辑——因为超过180度后，你光靠一个半圆转是盖不住整个圆的，必须左右切换。

那个旋转角度计算，其实就是小学数学：360度对应100%，所以1%是3.6度。想要显示30%的进度？右边转30 * 3.6 = 108deg就行了。但如果想要70%呢？右边先转到180度（也就是rotate(180deg)），然后左边那个从0度开始转，70 - 50 = 20%，20 * 3.6 = 72deg，所以左边转72度。就这么简单，别被那些动不动就搬出π和弧度的教程吓到了。

这里有个坑我得提前说：很多人搞不清transform-origin到底该设在哪。如果你让右边的半圆绕着它自己的中心转，那它只会原地打转，根本盖不住左边。所以必须把旋转中心设在圆的直径上——对于右半圆来说，就是left: 0，也就是整个圆的中心点。这样它转起来才会像扇子的合页一样，沿着直径扫过去。

HTML结构：大道至简，三个div走天下

我见过有人为了这个进度条嵌套五六个div，还美其名曰"语义化"。语义化个鬼啊，这就是个视觉组件，又不是给盲人读屏用的。我的原则是：能少一层绝不多一层，层级越深，后期调试越想死。

最精简的结构长这样：

<!-- 外层容器：定宽高，当clip-path用 --><divclass="progress-circle"data-percent="75"><!-- 左半圆：负责50%-100%的阶段 --><divclass="left-half"></div><!-- 右半圆：负责0%-50%的阶段 --><divclass="right-half"></div><!-- 中间遮罩：搞成空心圆环的关键 --><divclass="inner-mask"></div></div>

看到没？就三个div。.left-half和.right-half是两个绝对定位的半圆，.inner-mask是用来把中间掏空的——如果你想要的是实心饼图，这层可以删掉。

等等，我好像漏说了什么。对，CSS变量。现在都用2026年了，别再用JS去算角度然后写内联样式了，直接用CSS自定义属性，JS只需要改一个--percent的值，剩下的交给CSS自己算。这才是现代前端该有的样子：

<divclass="progress-circle"style="--percent: 75;"><divclass="left-half"></div><divclass="right-half"></div><divclass="inner-mask"></div></div>

这样后面配合JS的时候，只需要element.style.setProperty('--percent', 当前值)，比操作class或者直接改transform优雅一万倍。

CSS魔法：让这两个半圆听话地转起来

先上基础样式，把圆环的骨架搭起来。这里的关键是overflow: hidden和border-radius: 50%的配合，前者负责切掉多余的半圆，后者负责让容器变圆。

.progress-circle{/* 圆环大小，想改多大改多大 */width: 200px;height: 200px;/* 圆形容器，超出部分全部咔嚓掉 */border-radius: 50%;position: relative;/* 背景色就是未填充部分的颜色，比如灰色 */background: #e0e0e0;/* 这个很重要，后面的旋转基准点 */--percent: 0;}/* 左右两个半圆的公共样式 */.left-half, .right-half{position: absolute;top: 0;width: 50%;height: 100%;/* 填充色就是进度条的颜色 */background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);/* 旋转动画，0.6秒够了，太长显得拖沓 */transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}/* 右半圆负责0-50% */.right-half{right: 0;border-radius: 0 100px 100px 0;/* 右边是圆弧 *//* 旋转中心设在左边，也就是整个圆的中心 */transform-origin: left center;/* 默认转多少度？根据--percent来算，但不超过180度 */transform:rotate(calc(min(var(--percent), 50) * 3.6deg));/* 这里有个骚操作：当进度超过50%时，右半圆要一直保持在180度（完全显示） 同时z-index要变，让左半圆盖在上面 */z-index:calc(var(--percent) > 50 ? 1 : 2);}/* 左半圆负责50-100% */.left-half{left: 0;border-radius: 100px 0 0 100px;/* 左边是圆弧 *//* 旋转中心设在右边，也就是整个圆的中心 */transform-origin: right center;/* 默认是-180度（完全隐藏），超过50%后开始转 */transform:rotate(calc((max(var(--percent), 50) - 50) * 3.6deg - 180deg));/* 进度小于50%时，左半圆要在下面，大于50%时要浮上来 */z-index:calc(var(--percent) > 50 ? 2 : 1);}

看到这段CSS你可能有点懵，特别是那个calc里面套min和max的操作。这是CSS比较函数（CSS Comparison Functions），2020年之后的浏览器都支持了。它的作用是：不需要JS，CSS自己就能判断当前进度在哪个区间，该转多少度。

让我拆解一下右半圆的transform：

• 当--percent是30时，min(30, 50)等于30，所以转30 * 3.6 = 108deg，显示右半边的一部分
• 当--percent是70时，min(70, 50)等于50，所以转50 * 3.6 = 180deg，右半圆完全显示

左半圆的逻辑稍微绕一点：

• 当--percent是30时，max(30, 50)等于50，所以(50 - 50) * 3.6 - 180 = -180deg，左半圆完全隐藏在左边
• 当--percent是70时，max(70, 50)等于70，所以(70 - 50) * 3.6 - 180 = 72 - 180 = -108deg，等等，这不对啊？

哦对，我搞反了方向。左半圆应该从-180度（完全隐藏）转到0度（完全显示）。所以正确的计算应该是：

transform:rotate(calc((var(--percent) - 50) * 3.6deg));/* 但是这样小于50%的时候会是负数，所以需要clamp一下 */transform:rotate(calc(clamp(0,var(--percent) - 50, 50) * 3.6deg - 180deg));

其实更简单的方式是用两个关键帧动画，通过animation-play-state来控制，但那样JS介入的程度就深了。既然咱们吹的牛皮是"纯CSS方案"，那就得把逻辑尽量压在CSS侧。

等等，我好像发现个bug。上面的z-index用calc加条件判断，在某些浏览器里可能不生效，因为z-index虽然接受整数，但calc返回的是数值，而且那个条件判断的写法可能太新了。稳妥起见，还是用JS来切换class吧，或者直接用opacity和visibility来控制显示隐藏。

让我重写一版更兼容的：

.progress-circle{width: 200px;height: 200px;border-radius: 50%;position: relative;background: #e0e0e0;--percent: 0;--rotation:calc(var(--percent) * 3.6deg);}.right-half{position: absolute;right: 0;width: 50%;height: 100%;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 0 100px 100px 0;transform-origin: left center;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);/* 默认盖住左半圆 */z-index: 2;}.left-half{position: absolute;left: 0;width: 50%;height: 100%;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 100px 0 0 100px;transform-origin: right center;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);/* 默认被右半圆盖住 */z-index: 1;/* 初始状态：完全隐藏（转-180度） */transform:rotate(-180deg);}/* 当进度超过50%时，切换层级，让左半圆上来 */.progress-circle[data-half="second"] .right-half{z-index: 1;transform:rotate(180deg);/* 固定死，别动了 */}.progress-circle[data-half="second"] .left-half{z-index: 2;/* 从-180度开始转，转到对应的角度 */transform:rotate(calc((var(--percent) - 100) * 3.6deg));/* 等等，这个计算有问题，让我再想想 */}

算了，我发现纯CSS处理这个分段逻辑确实有点强人所难，特别是那个临界点50%的切换。还是让JS干点活吧，别死磕了。咱们改成JS只需要设置一个data-percent，然后CSS根据data-percent的值自动判断用哪套动画。

最终版方案，我称之为"JS偷懒，CSS搬砖"模式：

.progress-circle{width: 200px;height: 200px;border-radius: 50%;position: relative;background: #f0f0f0;--percent: 0;}/* 两个半圆容器，用来控制显示范围 */.half-container{position: absolute;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;}/* 右半圆容器只显示右边50% */.half-container.right{clip-path:inset(0 0 0 50%);}/* 左半圆容器只显示左边50% */.half-container.left{clip-path:inset(0 50% 0 0);}/* 实际的旋转元素 */.progress-bar{width: 100%;height: 100%;background:linear-gradient(90deg, #667eea 0%, #764ba2 100%);transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}/* 右半圆：0-50%时旋转，超过50%固定180度 */.half-container.right .progress-bar{transform:rotate(calc(min(var(--percent), 50) * 3.6deg));}/* 左半圆：0-50%时隐藏（-180度），超过50%后开始旋转 */.half-container.left .progress-bar{transform:rotate(calc(max(var(--percent) - 50, 0) * 3.6deg - 180deg));}

对应的HTML：

<divclass="progress-circle"style="--percent: 75;"><divclass="half-container right"><divclass="progress-bar"></div></div><divclass="half-container left"><divclass="progress-bar"></div></div><!-- 中间空心遮罩 --><divclass="center-mask"></div></div>

这个方案的好处是逻辑清晰：用clip-path把两个全圆切成半圆，然后各自旋转。min和max函数负责区间判断，0-50%时只有右半圆在动，左半圆躲在-180度（也就是完全隐藏），超过50%后右半圆固定在180度（完全显示），左半圆开始从-180度往0度转。

空心圆环的秘密：中间挖个洞就完事了

上面代码里的.center-mask还没写样式。这其实更简单，就是一个绝对定位的圆形，背景色跟页面背景一样，盖在最中间，营造出"只有边框在动"的效果。

.center-mask{position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);width: 160px;/* 比外圆小40px，就是20px的环宽 */height: 160px;background: white;/* 跟页面背景色一致 */border-radius: 50%;z-index: 10;/* 必须盖在最上面 *//* 如果想加点阴影提升质感 */box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);}

如果你想要的是实心饼图（像那种磁盘空间占用图），直接把.center-mask删掉就行。或者把它的背景色设成半透明，能看到后面的内容，那就是另一种风格了。

这里有个细节：如果父容器有背景图而不是纯色背景，.center-mask的背景色就不能写死成white了，得用background: inherit继承父容器的背景，或者用backdrop-filter: blur(10px)搞毛玻璃效果。不过后者性能开销比较大，移动端慎用。

动效调教：怎么转才不会像抽风

很多人写transition就写个all 0.3s ease，太敷衍了。进度条这种需要精确控制的动画，得用cubic-bezier自定义贝塞尔曲线。我上面用的cubic-bezier(0.4, 0, 0.2, 1)是Material Design的标准缓动曲线，特点是开始快中间慢结束快，看起来比较自然。

如果你想要那种"咔哒咔哒"的机械感，可以用steps(10)，让进度条一格一格地跳。如果是加载中的无限循环，那就不能用transition了，得用@keyframes：

@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.loading .progress-bar{animation: rotate 1s linear infinite;/* 这时候transition要去掉，不然会打架 */transition: none;}

还有个坑是关于旋转方向的。CSS的旋转默认是顺时针，但有时候你会发现进度条从100%回到0%的时候，它不是直接缩回去，而是顺时针转一大圈（经过360度）回到0度，看起来就像抽风一样。这是因为浏览器觉得从350度到10度，顺时针只要转20度，逆时针要转340度，所以选了顺时针——但它不知道你是想"倒退"进度啊！

解决办法是确保角度计算不会出现这种"绕远路"的情况。比如用JS控制的时候，如果新值比旧值小，先让旧值减360度，这样浏览器就会选择逆时针方向了。或者干脆用transition: none瞬间跳过去，然后再开动画。

真实世界的翻车现场

Safari的1px毛边惨案

你以为代码写完就完事了？Too young。在Safari上，两个半圆的接缝处会出现一条细细的白线或者黑线，特别是当进度接近50%的时候。这是因为浏览器的抗锯齿算法在边缘处理上有点抽风，两个图形拼接的地方没有完全对齐。

我的解决方案是：让两个半圆稍微重叠1px。把右半圆的宽度设成calc(50% + 1px)，左半圆也往右偏移1px。这样它们就有1px的重叠区域，接缝处的缝隙就被盖住了。虽然理论上会有1px的颜色叠加，但因为进度条是纯色，叠加后也没啥明显变化。

.half-container.right{clip-path:inset(0 0 0 50%);width:calc(50% + 1px);/* 偷偷加1px */}.half-container.left{clip-path:inset(0 50% 0 0);left: -1px;/* 往左挪1px，跟右边重叠 */width:calc(50% + 1px);}

动态修改时的闪烁黑线

有时候用JS动态改百分比，特别是在50%那个临界点切换的时候，会出现一瞬间两个半圆都显示或者都隐藏的闪烁。这是因为DOM更新和样式计算有个时间差，浏览器先渲染了z-index变化，还没来得及算新的transform。

我的土办法是：在修改百分比前，先把transition关掉，改完后再打开。或者更简单粗暴的，给容器加will-change: transform，让浏览器提前把图层准备好。

// 修改进度前的准备 circle.style.transition ='none'; circle.style.setProperty('--percent', 新值);// 强制重绘，让上面的改动立即生效 circle.offsetHeight;// 恢复动画 circle.style.transition ='transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)';

transform坐标系错乱

如果你的进度条父容器或者祖先元素也有transform属性（比如做了缩放、旋转），那子元素的transform-origin就会基于那个被变换过的坐标系，而不是原来的视口坐标系。结果就是旋转中心跑偏，进度条转得歪七扭八。

这问题没有完美的CSS解决方案，要么确保进度条的容器不要有transform祖先，要么用JS实时计算正确的旋转中心。或者换个思路，不用transform: rotate，改用clip-path: polygon()来切出扇形，虽然计算复杂点，但不受transform层级影响。

让同事喊666的骚操作

技巧一：空心实心一键切换

给容器加个data-type属性，CSS里用属性选择器判断：

/* 实心饼图模式 */.progress-circle[data-type="pie"] .center-mask{display: none;}/* 圆环模式（默认） */.progress-circle[data-type="ring"] .center-mask{display: block;}

JS只需要改个属性：circle.setAttribute('data-type', 'pie')，瞬间从加载动画变成磁盘占用图。

技巧二：阴影提升质感

别小看box-shadow，用好了能让你的进度条从"程序员画的"变成"设计师画的"。外发光加内阴影，层次感就出来了：

.progress-circle{box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 2px 4px rgba(0,0,0,0.05);}.center-mask{box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);}

技巧三：JS只改一个class

如果你不想用CSS变量（比如要兼容IE11那种老古董），可以用JS只切换class，具体角度用CSS预处理器生成：

// 生成0-100的class @for $i from 0 through 100 { .progress-circle[data-percent="#{$i}"] { --percent: #{$i}; } } 

JS只需要element.dataset.percent = 当前值，CSS自动匹配对应的样式。虽然生成的代码量大了点（100个选择器），但JS逻辑极简。

技巧四：封装成Mixin

如果你用Sass/Less，把这个逻辑封装起来，下次复制粘贴：

@mixin circle-progress($size: 200px, $stroke: 20px, $color: #667eea) { width: $size; height: $size; border-radius: 50%; position: relative; background: #e0e0e0; .half-container { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; &.right { clip-path: inset(0 0 0 50%); } &.left { clip-path: inset(0 50% 0 0); } } .progress-bar { width: 100%; height: 100%; background: $color; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .center-mask { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: $size - ($stroke * 2); height: $size - ($stroke * 2); background: white; border-radius: 50%; } } // 使用 .my-progress { @include circle-progress(150px, 15px, linear-gradient(90deg, #f093fb 0%, #f5576c 100%)); } 

这方案到底香不香？

说实话，写到这我都累了。这套方案优点很明显：零JS依赖（如果不算那行改CSS变量的代码），性能比SVG操作DOM节点快，比Canvas轻量，老浏览器（IE10+）勉强能跑。

但缺点也很致命：超过50%后的逻辑确实反人类，我上面写的那些minmax计算，过三个月我自己都看不懂。而且如果你想搞那种多色分段进度条（比如0-30%红色，30-70%黄色，70-100%绿色），这套方案直接gg，因为两个半圆都是单色的，换颜色就得换元素，复杂度爆炸。

还有，响应式适配比较麻烦。SVG可以viewBox自适应，Canvas可以重绘，CSS这个方案如果容器大小变了，你得重新算border-radius的像素值（虽然用百分比可以部分解决，但border-radius: 50%和clip-path的百分比基准不一样，容易出bug）。

所以我的建议是：简单场景用它，复杂场景老老实实SVG。加载动画、单色的圆形进度条、不需要精确控制每一段颜色的，这套方案够用了。如果是仪表盘、需要渐变色的、要分段显示的，别硬撑，上SVG或者ECharts吧。

最后的碎碎念

写到这我看了眼字数，好像快五千了？其实还可以继续水，比如讲讲怎么用conic-gradient实现更简单的方案（虽然兼容性差点），或者怎么用mask-image搞更骚的操作。但算了，留点头发要紧。

说实话，现在回头看，当年那个暴雨夜让我死磕纯CSS，可能纯粹是老板不懂技术瞎指挥。但正是那次折磨，让我对CSS的transform、clip-path、overflow这些属性有了肌肉记忆。有时候前端就是这样，为了省几行JS代码，CSS能写出花来，行数能绕地球一圈。

下次产品再提这种"就要纯CSS不要JS"的需求，我建议你直接把这篇文章甩他脸上，让他看看这玩意儿有多难搞。如果他坚持，那就把预估工时乘以3，毕竟头发的损失得用加班费来弥补。

如果调了半天还是调不出来，别硬撑。引入个progressbar.js或者nanobar不丢人，真的。毕竟咱们是解决问题，不是炫技。发际线要紧，心情要紧，下班后的火锅更要紧。

就这样吧，我去检查下代码有没有bug，你们有啥问题评论区见——虽然这篇文章没有评论区，那就… 算了，你们自己调试吧，反正坑我都帮你们踩过了。🍻

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！