---
title: 进度条 Progress
url: https://ui.zhaozimin.cn/components/progress/
markdown: https://ui.zhaozimin.cn/components/progress.md
group: 组件
origin: 提炼层组件（src/extracted），本仓库是唯一源头
source:
  - src/extracted/Feedback.jsx  # https://ui.zhaozimin.cn/src/extracted/Feedback.jsx
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 进度条 Progress

> 4px 细轨，.09 灰底，朱色填充。高度 ≤ 8px 的微件允许 2px 端帽圆角。

### 样张 · 24% · 64% · 100%

React：

```jsx
import { Progress } from './extracted/Feedback.jsx'

export function Values() {
  return (
    <div style={{ width: 360, display: 'grid', gap: 16 }}>
      <Progress value={24} label="上传进度" />
      <Progress value={64} label="学习进度" />
      <Progress value={100} label="已完成" />
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 360px; display: grid; gap: 16px">
  <div
    role="progressbar"
    aria-label="上传进度"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="24"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 24%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
  <div
    role="progressbar"
    aria-label="学习进度"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="64"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 64%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
  <div
    role="progressbar"
    aria-label="已完成"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="100"
    style="height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.09); overflow: hidden"
  >
    <div style="width: 100%; height: 100%; background: var(--zzm-accent, #a6402f)"></div>
  </div>
</div>
```

| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `value` | 0–100 | 0 | 百分比，自动夹紧 |
| `label` | string | '进度' | progressbar 的读屏名 |

## 铁律

- ✓ 要：朱色填充表示「你走到了这里」
- ✗ 不要：同屏多条朱色进度条——只有当前关注的那条用朱色，其余用墨色

---

上一页：[轻提示](https://ui.zhaozimin.cn/components/toast.md) · 下一页：[骨架屏](https://ui.zhaozimin.cn/components/skeleton.md) · 全站目录：https://ui.zhaozimin.cn/llms.txt