如何使用CSS将直线progress进度条修改为弧形进度条？是否需要更换HTML标签？

我已经实现了一个直线进度条，但现在想改成弧形的，不知道该怎么做。以下是我现有的代码：

现有CSS代码 #

.progbar{ top: 165px; left: 100px; width: 1450px; height: 20px; background: rgb(0, 157, 220); position:absolute; z-index: -1; border-radius: 30%; }
.progbar { color: lightblue; border-radius: 20px; }
.progbar::-webkit-progress-value { background: lightblue; border-radius: 20px; }
.progbar::-moz-progress-bar { background: lightcolor; border-radius: 20px; }
.progbar::-webkit-progress-value { background: rgb(153, 152, 152); border-radius: 20px; }
.progbar::-webkit-progress-bar { background: rgb(0, 157, 220); border-radius: 20px; }

现有HTML代码 #

<div class="content">
  <div class="mlogo">
    <img id="mlogo" src="">
  </div>
  <div class="metroHat"> BAŞAKŞEHİR-METROKENT >> KİRAZLI</div>
  <div><img class="metrologo" src="./images/metroistanbul-drm-ornek-07.png"></div>
  <div class="lejant" id="lejant"></div>
  <progress class="progbar" id="progress" value="0" max="100"></progress>
  <div class="durakIsimleri" id="durakIsimleri"></div>
  <div class="durakyerleri" id="durakyerleri"></div>
  <div class="aktarmaNoktaları" id="aktarmaNoktaları"></div>
  <div id="ok">
    <!-- <img src="images/tren.png" /> -->
  </div>
</div>

请问：

• 如何将该直线进度条修改为弧形进度条？
• 此需求是否可通过现有HTML标签实现，还是需要更换其他标签？

首先直接给结论：原生的<progress>标签几乎没法实现弧形（环形/半圆）进度条，它的设计初衷就是做线性进度展示，浏览器默认的样式和内部结构把它限制死了。所以咱们得换掉<progress>，改用更灵活的元素来实现，比如<div>或者<svg>。

下面给你两种实用的实现方式，按需选就行：

方法1：用CSS实现半圆弧形进度条 #

适合简单的半圆进度场景，通过两个半圆容器叠加，配合旋转和裁剪来控制进度：

修改后的HTML（替换原<progress>标签） #

<div class="arc-progress">
  <div class="arc-progress-bg"></div>
  <div class="arc-progress-fill" id="arcFill"></div>
</div>

对应的CSS #

.arc-progress {
  position: absolute;
  top: 165px;
  left: 100px;
  width: 725px; /* 宽度设为原直线条的一半，对应半圆的半径 */
  height: 1450px; /* 高度对应原直线条的长度，作为半圆的直径 */
  overflow: hidden;
}

.arc-progress-bg {
  width: 100%;
  height: 100%;
  border-radius: 725px 0 0 725px; /* 画出左侧半圆的背景 */
  background: rgb(0, 157, 220);
  position: absolute;
  right: 0;
}

.arc-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: 725px 0 0 725px;
  background: rgb(153, 152, 152);
  position: absolute;
  right: 0;
  transform-origin: right center; /* 以右侧中心为旋转原点 */
  transform: rotate(180deg); /* 默认旋转180度，进度为0时完全隐藏 */
  transition: transform 0.3s ease; /* 加个过渡动画更顺滑 */
}

JS控制进度（模拟原<progress>的value逻辑） #

function setArcProgress(value) {
  const fill = document.getElementById('arcFill');
  const percentage = value / 100;
  // 旋转角度范围：180deg（进度0）到0deg（进度100）
  const rotateAngle = 180 - (percentage * 180);
  fill.style.transform = `rotate(${rotateAngle}deg)`;
}

// 示例：设置进度为50%
setArcProgress(50);

方法2：用SVG实现更灵活的弧形进度条 #

SVG是实现任意弧形/环形进度的最佳选择，能精确控制路径形状，适合复杂的弧形需求：

修改后的HTML（替换原<progress>标签） #

<svg class="svg-progress" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景弧形 -->
  <path d="M100,20 A80,80 0 1,1 100,180" stroke="rgb(0, 157, 220)" stroke-width="10" fill="none"/>
  <!-- 进度弧形 -->
  <path id="svgProgressFill" d="M100,20 A80,80 0 1,1 100,180" stroke="rgb(153, 152, 152)" stroke-width="10" fill="none" stroke-dasharray="502.65" stroke-dashoffset="502.65"/>
</svg>

对应的CSS #

.svg-progress {
  position: absolute;
  top: 165px;
  left: 100px;
  width: 400px;
  height: 400px;
  /* 根据你的布局需求调整位置和大小 */
}

#svgProgressFill {
  transition: stroke-dashoffset 0.3s ease;
}

JS控制进度 #

function setSvgProgress(value) {
  const fill = document.getElementById('svgProgressFill');
  const circumference = 2 * Math.PI * 80; // 80是弧形的半径，计算周长
  const offset = circumference - (value / 100) * circumference;
  fill.style.strokeDasharray = circumference;
  fill.style.strokeDashoffset = offset;
}

// 示例：设置进度为75%
setSvgProgress(75);

总结 #

• 别再用<progress>标签了，它满足不了弧形进度的需求；
• 简单半圆用CSS就能快速实现，复杂弧形/环形优先选SVG；
• 两种方式都需要用JS来控制进度值，模拟原<progress>的value和max逻辑。

内容的提问来源于stack exchange，提问作者notbad