使用双半圆拼接法可轻松实现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 设置，我们只给某一边设置颜色，配合旋转就能形成弧形。
Shrink.media
Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具
123 查看详情
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 和层级关系。
以上就是在初级项目中如何用css制作进度环的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1024655.html
微信扫一扫 
支付宝扫一扫 
