# 进度条 ProgressBar

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/progress-bar
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用条状图形表示百分比进度。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

用条状图形表示百分比进度。

## 何时使用

适用于展示任务当前进度。

## 示例

## ProgressBar

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| percent | 进度条百分比 | `number` | `0` |
| rounded | 是否圆角 | `boolean` | `true` |
| text | 是否显示进度文字，支持自定义渲染内容 | `boolean \| ReactNode \| ((percent: number) => ReactNode)` | `false` |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --fill-color | 填充的颜色 | `var(--adm-color-primary)` | `--adm-progress-bar-fill-color` |
| --track-color | 线条的颜色 | `var(--adm-color-border)` | `--adm-progress-bar-track-color` |
| --track-width | 线条宽度 | `8px` | `--adm-progress-bar-track-width` |
| --text-width | 文字内容的宽度 | `40px` | `--adm-progress-bar-text-width` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt