# ProgressBar

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/progress-bar
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Percentage progress is represented as a bar graph.

## Install

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

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Percentage progress is represented as a bar graph.

## When to Use

It is suitable for displaying the current progress of the task.

## Demos

## ProgressBar

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| percent | Percent of the progress bar | `number` | `0` |
| rounded | Whether to round the corners | `boolean` | `true` |
| text | Whether to display progress text, support custom rendering content | `boolean \| ReactNode \| ((percent: number) => ReactNode)` | `false` |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --fill-color | The color of fill part. | `var(--adm-color-primary)` | `--adm-progress-bar-fill-color` |
| --track-color | The color of line. | `var(--adm-color-border)` | `--adm-progress-bar-track-color` |
| --track-width | The width of line. | `8px` | `--adm-progress-bar-track-width` |
| --text-width | The width of text content. | `40px` | `--adm-progress-bar-text-width` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt