COMPONENT 49 · Feedback & Status

环形进度

Progress Ring

也叫Circular ProgressRadial Progress环形进度条

用圆环填充比例显示确定性任务的完成进度。

Shows determinate task completion as a partially filled circular track.

ANATOMY & USAGE

结构与使用建议

组成部分

圆环轨道
进度弧线
数值标签

适合使用

空间紧凑且需要显示单个任务的确定进度时。

不建议使用

无法估算完成比例或需要比较多个精确值时。

键盘与无障碍

提供 progressbar 名称、最小最大值与当前值；动画不是唯一信息来源。

DESCRIBE IT TO AI

这样告诉编程助手

实现环形进度（Progress Ring）：用圆环填充比例显示确定性任务的完成进度。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack">
  <div class="progress-ring" role="progressbar" aria-label="上传进度" aria-valuemin="0"
  aria-valuemax="100" aria-valuenow="64">
  <svg viewBox="0 0 40 40" aria-hidden="true">
    <circle class="ring-track" cx="20" cy="20" r="16">
    </circle>
    <circle class="ring-value" cx="20" cy="20" r="16">
    </circle>
  </svg>
  <output>64%</output>
</div>
<label for="ring-control">调整进度</label>
<input id="ring-control" type="range" min="0" max="100" value="64">
</section>