# 进度圈 ProgressCircle

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/progress-circle
- 资源: 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。

用环形图形表示百分比进度。

## 何时使用

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

## 示例

## ProgressCircle

### 属性

| 参数     | 说明         | 类型              | 默认值 |
| -------- | ------------ | ----------------- | ------ |
| children | 自定义信息   | `React.ReactNode` | -      |
| percent  | 进度圈百分比 | `number`          | `0`    |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --fill-color | 填充部分的颜色 | `var(--adm-color-primary)` | `--adm-progress-circle-fill-color` |
| --size | 画布的宽高，仅支持 px 单位 | `50px` | `--adm-progress-circle-size` |
| --track-color | 轨道的颜色 | `var(--adm-color-border)` | `--adm-progress-circle-track-color` |
| --track-width | 线条宽度，仅支持 px 单位 | `3px` | `--adm-progress-circle-track-width` |

## 常见问题

### 关于使用 rem 的重要提醒

ProgressCircle 仅支持 `px` 单位，因为在 Safari 下非 `px` 单位会出现样式 bug。

所以如果你的项目中使用了 rem 布局，那么编译时对样式的预处理会导致默认的 `--size` 和 `--track-width` 的单位变为 `rem`，从而很可能在 iOS 设备中会出现 bug。解决方法是在项目中手动将 `--size` 和 `--track-width` 设置回 `px` 单位。

---

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