如何使用<progress>标签而非div创建弧形进度条

嘿，这个思路真的很赞！原生<progress>标签的语义化和无障碍支持确实是SVG或div实现无法替代的——它天生就被屏幕阅读器等辅助设备识别为进度指示器，这一点非常重要。不过得先明确：原生<progress>本身默认是线性的，浏览器没有内置弧形样式，但我们可以通过CSS自定义视觉表现，同时完全保留它的语义和无障碍特性。

下面是具体的实现方案，核心思路是“保留<progress>的语义结构，用CSS替换视觉样式”：

1. 基础HTML结构（不变，保证语义） #

先写标准的<progress>标签，这部分是核心，绝对不能改，确保辅助设备能正确识别：

<progress id="arc-progress" value="65" max="100"></progress>

2. 用CSS自定义弧形外观 #

我们要做的是：隐藏浏览器默认的线性进度条样式，用CSS伪元素和渐变、遮罩来构建环形进度条，同时关联<progress>的value值。

完整CSS代码示例 #

/* 重置progress的默认浏览器样式 */
#arc-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 140px;
  border: none;
  position: relative;
  /* 确保元素本身依然可访问，只是隐藏默认视觉 */
  color: transparent;
}

/* 针对不同浏览器的默认进度条轨道/填充，全部设为透明 */
#arc-progress::-webkit-progress-bar {
  background: transparent;
}
#arc-progress::-webkit-progress-value {
  background: transparent;
}
#arc-progress::-moz-progress-bar {
  background: transparent;
}

/* 用伪元素创建环形进度条的视觉效果 */
#arc-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* 用锥形渐变实现进度填充，--progress变量关联实际进度值 */
  background: conic-gradient(#2196F3 0deg calc(var(--progress) * 3.6deg), #E0E0E0 calc(var(--progress) * 3.6deg) 360deg);
  /* 用径向渐变遮罩挖空中间，形成环形 */
  mask: radial-gradient(transparent 65%, black 65%);
  -webkit-mask: radial-gradient(transparent 65%, black 65%);
}

3. 用JS同步进度值到CSS变量 #

因为CSS无法直接读取<progress>的value属性，所以需要用JS把值同步到我们定义的--progressCSS变量中：

const progressEl = document.getElementById('arc-progress');

// 初始化同步进度值
function updateArcProgress() {
  const progressValue = progressEl.value;
  progressEl.style.setProperty('--progress', progressValue);
}

// 首次加载时执行
updateArcProgress();

// 如果需要动态更新进度，监听value变化即可
// 比如：progressEl.addEventListener('change', updateArcProgress);

关键注意事项 #

• 保留无障碍特性：绝对不能用display: none或者visibility: hidden隐藏<progress>本身，我们只是隐藏它的默认视觉样式，元素的语义依然存在，辅助设备能正常识别。
• 浏览器兼容性：conic-gradient和mask属性需要注意浏览器支持，现代主流浏览器（Chrome、Firefox、Edge）都已支持，如需兼容旧版浏览器可以考虑降级方案（比如用SVG作为背景）。
• 进度数值展示：如果需要显示具体的进度百分比，可以在<progress>旁边添加一个<span>元素，用JS同步更新数值，同时给这个span加上aria-hidden="true"避免重复播报，或者直接利用<progress>的aria-label补充说明。

这样实现的弧形进度条，既拥有原生<progress>的所有语义和无障碍优势，又具备了你想要的弧形视觉效果，完美兼顾了功能和体验~

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