小白也能搞定：用CSS3双半圆实现炫酷圆形进度条（附完整逻辑解

小白也能搞定：用CSS3双半圆实现炫酷圆形进度条（附完整逻辑解析）

“进度条嘛，不就是一条横线从左爬到右？”
直到产品经理把 Figma 链接甩过来，我才发现——人家要的是一个会发光的、带渐变的、能回弹的、直径 120 px 的圆环，而且不许用 SVG。
那天下午，我端着咖啡，盯着屏幕里那个完美的圆，脑子里只有一个念头：
“兄弟，你这是要我命。”

好在，命保住了，进度条也跑起来了。今天就把这条命（划掉）经验打包送给你，纯 CSS3，双半圆，零 SVG，从“这是啥”到“随便改”，一篇管饱。

为什么不用 SVG？聊聊纯 CSS 实现圆形进度条的诱惑

先别急着抄代码，我们聊五毛钱的动机。

SVG 当然香，路径、描边、动画一条链，API 多得像糖果店。但现实里，SVG 在小程序里要降版本、在邮件模板里被禁用、在老旧安卓里直接裂图，更惨的是，设计师给的 Sketch 文件里压根没导出 SVG，只有一张 2× 图和一句“辛苦啦”。

CSS3 则像小区门口的煎饼摊——随叫随到，不加蛋也管饱：

1. 零额外请求，样式即组件；
2. 任意尺寸、任意颜色，改个变量就能换皮肤；
3. 硬件加速的transform和border-radius，60 fps 稳如老狗；
4. 最重要的是，面试问起来你可以说“纯 CSS 实现”，气场瞬间两米八。

所以，今天这条圆环，不靠 SVG，就靠两片半圆 + 一点点旋转魔法。学会了，下次产品经理再甩链接，你就能把键盘一推：“十分钟，给我倒杯咖啡就好。”

从视觉错觉到旋转魔法：双半圆如何“拼”出完整进度

先拆穿魔术师的底牌。

一个整圆 360°，我们把它从 12 点钟位置劈开，左半边叫左半圆（0–180°），右半边叫右半圆（180–360°）。
进度条跑起来的时候，先把右半圆顺时针转到目标角度；超过 180° 之后，左半圆再接着转，这样就能无缝拼出 0→360° 的任意进度。

借用小学美术老师的话：“先画左边再画右边，圆就圆了。”

技术翻译如下：

一句话总结：两片半圆，错峰出行，视觉无缝。

HTML 骨架怎么搭才最省事？两个 div 还是一个伪元素？

“写 HTML 就像拼乐高，块数越少，脚越不疼。”

最省事的结构只要三层：

<!-- 最外层：当容器，负责大小、阴影、居中 --><divclass="circle-progress"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"><!-- 右半圆 --><divclass="circle-progress__right"><divclass="circle-progress__fill"></div></div><!-- 左半圆 --><divclass="circle-progress__left"><divclass="circle-progress__fill"></div></div><!-- 中间放数字 | 图标 | 文案，随意 --><divclass="circle-progress__text">0%</div></div>

为什么一定要套两层？因为外层负责裁剪（overflow:hidden），内层负责旋转。
把填充层单独拎出来，后续换渐变、加 box-shadow 都只要改一处，别问我是怎么知道的——曾经把 48 个伪元素写进一个文件，维护到怀疑人生。

关键样式逐行剖析：border-radius、transform、clip 这些属性到底在偷偷干啥

样式是灵魂，一行写错，半圆变饺子。

/* 1. 先给整个圆定个大小，随便改 */.circle-progress{--size:120px;/* 直径 */--stroke:8px;/* 圆环厚度 */--color:#ff6b6b;/* 主色调 */--bg:#e9ecef;/* 兜底背景色 */--duration:.6s;/* 动画时长 */width:var(--size);height:var(--size);border-radius:50%;position:relative;background:var(--bg);/* 兜底圆盘 */overflow:hidden;/* 把冒出来的半圆砍回去 */display:grid;place-content:center;font-size:calc(var(--size)/5);font-weight:600;}/* 2. 左右半圆公用壳：各占 50%，超出隐藏 */.circle-progress__right, .circle-progress__left{position:absolute;top:0;width:50%;height:100%;overflow:hidden;}.circle-progress__right{right:0;}.circle-progress__left{left:0;}/* 3. 真正的“填充”条：用 border 造假圆环 */.circle-progress__fill{position:absolute;width:100%;height:100%;border:var(--stroke)solidvar(--color);border-radius:50%;/* 关键！变圆 */box-sizing:border-box;}/* 右半圆：先把边框全部染成主色，再裁掉左半边 */.circle-progress__right .circle-progress__fill{border-left-color:transparent;/* 一刀砍掉左半边 */transform-origin:left center;/* 旋转轴心在左侧中线 */}/* 左半圆：相反操作 */.circle-progress__left .circle-progress__fill{border-right-color:transparent;transform-origin:right center;transform:rotate(180deg);/* 默认先藏后面 */}

上面这段 CSS 像给两个半圆分别发了一张“身份证”：

• 右半圆只保留右边框，转轴在左边；
• 左半圆只保留左边框，转轴在右边，并且默认先翻转 180° 躲起来。

overflow:hidden 是剪刀，border-radius 是磨边机，两者配合，才能把方形 div 剪成标准半圆。
别偷懒把clip搬出来——那是上古 API，移动端会翻车，听哥一句劝。

动态进度的秘密：用 CSS 变量配合 JavaScript，让进度条真正“动”起来

静态半圆摆好，得让它听得懂人话。

思路极简：

1. JS 把百分比换算成角度；
2. 角度 ≤180° 时，只转右半圆；
3. 角度 >180° 时，右半圆先转到 180°，左半圆再转剩余角度。

/** * 设置圆形进度 * @param {HTMLElement} el 外层容器 .circle-progress * @param {number} val 0~100 */functionsetCircleProgress(el,val){val=Math.min(100,Math.max(0,val));// 兜底 0-100constangle=val*3.6;// 1% = 3.6°constrightFill=el.querySelector('.circle-progress__right .circle-progress__fill');constleftFill=el.querySelector('.circle-progress__left .circle-progress__fill');if(angle<=180){rightFill.style.transform=`rotate(${angle}deg)`;leftFill.style.transform=`rotate(180deg)`;// 继续藏好}else{rightFill.style.transform=`rotate(180deg)`;// 右半圆先顶满leftFill.style.transform=`rotate(${angle}deg)`;}/* 同步文字 & ARIA */el.querySelector('.circle-progress__text').textContent=val+'%';el.setAttribute('aria-valuenow',val);}

一行调用，想跑多少跑多少：

constbar=document.querySelector('.circle-progress');letnow=0;consttimer=setInterval(()=>{setCircleProgress(bar,now++);if(now>100)clearInterval(timer);},30);

CSS 变量也能插一脚：
如果你只想纯 CSS 控制，可以把角度存在--angle，然后改transform函数：

.circle-progress__right .circle-progress__fill{transform:rotate(var(--angle-right,0deg));}.circle-progress__left .circle-progress__fill{transform:rotate(var(--angle-left,180deg));}

JS 只负责赋值，把逻辑层和表现层彻底解耦，后期换主题、加回弹动画都方便。

性能与兼容性实测：哪些浏览器会翻车？移动端表现到底稳不稳

先说结论：IE 凉了，其他都能打。

• border-radius从 iOS 3、Android 2 就开始支持，老掉牙的属性，稳；
• transform硬件加速在移动端开了 GPU 直通车，60 fps 不掉帧；
• 唯一要注意：部分国产 WebView 对overflow:hidden的圆裁剪有 1 px 白边，解决方案是外层再套一层 1px 的遮罩，或者把--stroke设成偶数。

真机测试数据（小米 10、iPhone 12、华为 Mate 40）：

结论：尽管往项目上丢，性能焦虑是浏览器自己的事。

真实项目中的花式玩法：加载动画、仪表盘、倒计时——同一个组件 N 种变身

学会了基础圆环，就像拿到一张万能饭票，想加什么菜随便点。

1. 渐变彩虹环

.circle-progress__fill{border-image:conic-gradient(from 0deg,#ff6b6b,#ffd93d,#6bcf7f,#4ecdc4,#ff6b6b)1;}

注意：border-image会覆盖border-color，想同时玩透明裁剪，需要把左右两半分别用伪元素做渐变背景，再mask裁剪——篇幅原因先埋坑，评论区催更我就补。

2. 回弹 easing

.circle-progress__fill{transition:transformvar(--duration)cubic-bezier(0.68,-0.55,0.27,1.55);}

一句话：cubic-bezier拉出负值，回弹像果冻，产品经理看了直喊“有内味了”。

3. 倒计时 + 变色

consttotal=60;// 秒letleft=total;consttimer=setInterval(()=>{constratio=(total-left--)/total*100;setCircleProgress(bar,ratio);// 低于 20% 变红bar.style.setProperty('--color',ratio>80?'#ff6b6b':'#51cf66');if(left<0)clearInterval(timer);},1000);

倒计时结束，圆环一秒变红，再配个“时间到”抖动动画，仪式感直接拉满。

4. 多层仪表盘

把三个圆环套娃，外层转速最慢，内层最快，伪 3D 机械表效果就出来了：

<divclass="circle-progress"style="--size:180px;--stroke:6px;--color:#339af0;"><divclass="circle-progress"style="--size:140px;--stroke:8px;--color:#51cf66;"><divclass="circle-progress"style="--size:100px;--stroke:10px;--color:#ff6b6b;"><divclass="circle-progress__text">RPM</div></div></div></div>

JS 分别给三层 setCircleProgress，转速比 1:2:4，机械感扑面而来。

踩坑日记：那些让我熬夜的诡异 Bug

1. 半圆对不齐
   现象：左右半圆接缝处多出 1 px 背景色。
   元凶：容器宽高奇数，50% 像素出现 0.5 px 误差。
   解法：--size设成偶数，**或者外层加transform: scale(1.01)暴力盖边`。

2. 颜色突变
   现象：进度到 50% 时突然闪一下。
   元凶：左半圆从 180° 瞬间归零，浏览器没开硬件加速。
   解法：给.circle-progress__fill加will-change: transform;，告诉 GPU 提前备货。

3. 旋转方向反了
   现象：进度条逆时针跑。
   元凶：transform-origin写反，右半圆轴心在右，左半圆轴心在左。
   解法：把 origin 改回正确位置，或者把角度取负值，但前者可读性高，别给自己挖坑。

4. 小米 8 白屏
   现象：圆环整个失踪。
   元凶：系统 WebView 把overflow:hidden当空气。
   解法：外层再包一层.clipfix设border-radius:50%;overflow:hidden;双层裁剪，或者干脆上 SVG 降级——毕竟用户大于天。

前端老鸟私藏技巧：如何用最少代码写出最灵活的圆形进度条组件

“组件写得好，摸鱼少不了。”

1. 自定义元素 + Shadow DOM

classCircleProgressextendsHTMLElement{staticgetobservedAttributes(){return['value','max','color','size'];}constructor(){super();this.attachShadow({mode:'open'}).innerHTML=`<style>${CSS字符串}</style> <div class="circle-progress" style="--size:${this.size};--color:${this.color}"> <!-- 结构同上 --> </div>`;}getvalue(){returnNumber(this.getAttribute('value'))||0;}setvalue(v){this.setAttribute('value',v);}attributeChangedCallback(){// 同步 setCircleProgress 逻辑}}customElements.define('circle-progress',CircleProgress);

使用就像写标签：

<circle-progressvalue="30"max="100"color="#ff6b6b"size="80px"></circle-progress>

样式隔离、即插即用，Vue/React 都不香了。

2. React 一键 Hook

import { useEffect, useRef } from 'react'; function useCircleProgress(value){ const ref = useRef(null); useEffect(()=>{ setCircleProgress(ref.current, value); }, [value]); return ref; } // 组件内 <div className="circle-progress" ref={useCircleProgress(percent)}> <div className="circle-progress__right">...</div> ... </div>

逻辑复用，零依赖，比找 npm 包还快。

3. Less/Sass 循环生成尺寸皮肤

@sizes: 60px, 80px, 100px, 120px, 150px; each(@sizes, { .circle-progress-@{index} { --size: @value; --stroke: round(@value/15); font-size: round(@value/5); } });

设计师要 10 种尺寸？
一行循环，十秒搞定，剩下的时间刷会儿微博不香吗。

尾声：把圆环交给你，把咖啡留给我

写到这里，进度条已经跑了 100 次，咖啡也续了三杯。
从“半圆是啥”到“组件随便用”，我们只用了不到一百行代码，却把 SVG 的饭碗抢了一半。

下次再遇到“圆环+渐变+回弹+变色+大小随意”的需求，把这篇文章甩给他，然后端起咖啡去阳台透透气。
剩下的让双半圆自己转去吧——

它转它的，你摸你的。

“生活不止有 deadline，还有会旋转的 CSS。”

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

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

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

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