使用双半圆拼接法可轻松实现CSS进度环。首先通过HTML构建包含左右半圆和文本的结构，利用.progress-ring创建圆形容器，.progress-left和.progress-right分别控制0–50%与50%以上的进度显示；接着在CSS中设置.progress-bar的边框颜色与旋转角度，通过transform: rotate()控制弧度，如70%进度对应252°，右半圆转126°，左半圆补足剩余部分；最后用绝对定位居中.progress-text显示百分比。该方法依赖border+rotate模拟弧形，兼容性好，适合初学者掌握原理。
在初级项目中，用 CSS 制作一个简单的进度环并不复杂。核心思路是利用圆形的边框、透明背景和旋转动画或伪元素来模拟进度效果。下面介绍一种常见且易懂的方法——使用两个半圆拼接的方式实现。
1. 基本结构：HTML 搭建
先写一个容器元素，用于显示进度环：
50%
这里通过左右两个半圆（left 和 right）组合成完整的环形进度条，每个半圆内部包含一个弧形 bar。
2. 样式设计：CSS 绘制圆形进度
使用 CSS 创建圆形和半圆结构：
立即学习“前端免费学习笔记（深入）”；
.progress-ring {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background: #e0e0e0;
}
.progress-left, .progress-right {
width: 50px;
height: 100px;
position: absolute;
top: 0;
overflow: hidden;
}
.progress-left {
left: 0;
}
.progress-right {
right: 0;
}
.progress-bar {
width: 100px;
height: 100px;
border: 8px solid transparent;
border-radius: 50%;
position: absolute;
top: 0;
}
关键点在于 .progress-bar 的 border 设置，我们只给某一边设置颜色，配合旋转就能形成弧形。
3. 控制进度：通过旋转控制显示角度
假设我们要显示 70% 的进度（即 252 度），可以这样处理：
- 0–50% 由右半圆控制
- 50% 以上时，右半圆满，左半圆开始显示多余部分
CSS 示例（以 70% 为例）：
/* 右侧半圆：最多显示 50% */
.progress-right .progress-bar {
border-color: #4caf50;
border-right-color: transparent;
transform: rotate(126deg); /* 70% * 3.6 = 252°，但右侧最多转180° */
}
/ 左侧半圆：当超过50%，才开始显示 /
.progress-left .progress-bar {
border-color: #4caf50;
border-left-color: transparent;
transform: rotate(-126deg); / 负值确保从左侧开始画 /
}
注意：实际开发中可以用 JavaScript 动态计算角度并添加类或内联样式。
4. 添加文字居中显示
中间的文字可以通过绝对定位居中：
.progress-text {
position: absolute;
width: 70px;
height: 70px;
left: 15px;
top: 15px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333;
}
这样就能在环中间显示当前进度百分比。
基本上就这些。这个方法兼容性好，适合初学者理解原理。进阶可用 SVG 或 conic-gradient 优化，但在简单项目中，这种双半圆法足够实用。关键是理解如何用 border + rotate 模拟弧形进度。不复杂但容易忽略细节，比如 overflow:hidden 和层级关系。
