ProgressBar
Percentage progress is represented as a bar graph.
Install
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 |