请教：如何实现如图所示的Filled circle progress bar？

方法一：CSS + 少量JS（简洁高效） #

这种方法利用CSS锥形渐变和变量实现，无需额外资源。

HTML结构

<div class="progress-circle">
  <div class="progress-circle-fill" style="--progress: 75"></div>
  <div class="progress-circle-text">75%</div>
</div>

CSS样式

.progress-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  background: #e0e0e0; /* 未填充底色 */
}

.progress-circle-fill {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 锥形渐变实现填充，--progress变量控制进度范围0-100 */
  background: conic-gradient(#4CAF50 0deg, #4CAF50 calc(var(--progress) * 3.6deg), transparent calc(var(--progress) * 3.6deg));
  clip-path: circle(50% at center);
  position: absolute;
  top: 0;
  left: 0;
}

.progress-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

动态修改进度（JS）

// 示例：将进度改为60%
const progressElement = document.querySelector('.progress-circle-fill');
const textElement = document.querySelector('.progress-circle-text');

progressElement.style.setProperty('--progress', 60);
textElement.textContent = '60%';

方法二：SVG实现（适合复杂定制） #

SVG方案对形状、线条样式的控制更灵活，比如可设置圆角端点。

<svg width="120" height="120" viewBox="0 0 120 120">
  <!-- 背景圆环 -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#e0e0e0" stroke-width="10"/>
  <!-- 填充圆环：stroke-dasharray为圆周长≈314.16，stroke-dashoffset控制未填充部分 -->
  <circle cx="60" cy="60" r="50" fill="none" stroke="#4CAF50" stroke-width="10"
          stroke-dasharray="314.16" stroke-dashoffset="78.54" stroke-linecap="round"/>
  <!-- 中心文本 -->
  <text x="60" y="65" text-anchor="middle" font-size="18" font-weight="bold" fill="#333">75%</text>
</svg>

计算逻辑：进度75%时，未填充部分长度 = (100-75)/100 * 314.16 = 78.54，对应stroke-dashoffset的值。动态修改时直接更新该属性和文本即可。

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