---
url: https://ain.hmgf.hxcn.space/contribution/project-components/progress.md
description: HeroUI 风格进度条组件，支持尺寸、颜色、不确定态、条纹、标签、数值与自定义样式。
---

# Progress 组件

`Progress` 适合展示构建进度、任务执行状态、上传百分比和配额使用情况。

## 基础用法

```md
<Progress label="文档构建进度" :value="72" show-value />
```

## Sizes

## Colors

## Indeterminate

```md
<Progress label="正在同步远端资源" indeterminate />
```

## Striped

## With Label

## With Value

## Value Formatting

## Custom Styles

```md
<Progress
  label="自定义样式"
  :value="58"
  show-value
  track-class="vp-pro-progress-demo-track"
  indicator-class="vp-pro-progress-demo-indicator"
/>
```

## 在容器组件中使用

## Props

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `value` | `number` | `0` | 当前值。 | `:value="72"` |
| `min` | `number` | `0` | 最小值。 | `:min="0"` |
| `max` | `number` | `100` | 最大值。 | `:max="200"` |
| `label` | `string` | `''` | 左侧标签。 | `label="上传进度"` |
| `color` | `default \| primary \| success \| warning \| danger` | `primary` | 主题色。 | `color="success"` |
| `size` | `sm \| md \| lg` | `md` | 进度条高度。 | `size="lg"` |
| `indeterminate` | `boolean` | `false` | 不确定态，忽略数值宽度。 | `indeterminate` |
| `striped` | `boolean` | `false` | 条纹效果。 | `striped` |
| `showLabel` | `boolean` | `true` | 是否显示标签。 | `:show-label="false"` |
| `showValue` | `boolean` | `false` | 是否显示右侧数值。 | `show-value` |
| `format` | `percent \| value` | `percent` | 数值格式模式。 | `format="value"` |
| `formatOptions` | `Intl.NumberFormatOptions` | `{}` | 百分比或数值格式选项。 | `:format-options="{ maximumFractionDigits: 1 }"` |
| `valueText` | `string` | `''` | 直接覆盖显示文本。 | `value-text="37 / 50"` |
| `trackClass` | `string` | `''` | 轨道附加类名。 | `track-class="my-track"` |
| `indicatorClass` | `string` | `''` | 进度条附加类名。 | `indicator-class="my-indicator"` |
| `labelClass` | `string` | `''` | 标签附加类名。 | `label-class="my-label"` |
| `valueClass` | `string` | `''` | 数值附加类名。 | `value-class="my-value"` |