进度圈 ProgressCircle
用环形图形表示百分比进度。
安装
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 单位。