CSS进度环制作教程详解

想用CSS制作进度环吗？本文提供一份详细教程，教你利用双半圆拼接法轻松实现美观的进度显示效果。首先，通过HTML构建基本结构，包含左右半圆和文本显示区域。然后，利用CSS设置圆形容器的样式，并通过控制`.progress-bar`的边框颜色和旋转角度，精确呈现0-100%的进度。例如，70%进度对应252°的旋转角度，巧妙地通过右半圆和左半圆的配合完成。最后，通过绝对定位居中显示百分比数值，让进度环更加直观。这种方法兼容性好，易于理解，非常适合CSS初学者掌握。快来学习如何用简单的CSS技巧，打造令人眼前一亮的进度环吧！

使用双半圆拼接法可轻松实现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 和层级关系。

本篇关于《CSS进度环制作教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！