# ProgressCircle

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/progress-circle
- 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 by a ring 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 by a ring graph.

## When to Use

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

## Demos

## ProgressCircle

### Props

| Name     | Description                    | Type              | Default |
| -------- | ------------------------------ | ----------------- | ------- |
| children | Customized information         | `React.ReactNode` | -       |
| percent  | Percent of the progress circle | `number`          | `0`     |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --fill-color | Color of the fill part | `var(--adm-color-primary)` | `--adm-progress-circle-fill-color` |
| --size | Width and height of the canvas | `50px` | `--adm-progress-circle-size` |
| --track-color | Color of the track | `var(--adm-color-border)` | `--adm-progress-circle-track-color` |
| --track-width | Width of the line | `3px` | `--adm-progress-circle-track-width` |

## FAQ

### Important reminder about using rem

ProgressCircle only supports `px` units due to a styling bug in Safari with non-`px` units.

So if you use the rem layout in your project, the preprocessing of the styles at compile time will cause the default `--size` and `--track-width` units to become `rem`, which is likely to be used on iOS devices. bugs will appear. The workaround is to manually set `--size` and `--track-width` back to `px` units in the project.

---

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