跳到主要内容

环形进度条

用于展示当前操作的进度，支持百分比形式的视觉展示。

何时使用​

  • 操作耗时较长（>2秒）时，需向用户反馈当前进度
  • 操作会打断当前界面，或在后台运行
  • 需展示某操作的完成百分比（如：上传进度、任务处理进度）

一、属性配置​

1. 数据来源​

数据配置

支持以下方式绑定进度值：

  • 手动赋值
  • 数据绑定
  • 视图参数
  • 组件绑定

详见：数据绑定

2. 功能设置​

功能设置入口

1）中心文字​

中心文字支持两种模式：

  • 默认模式：显示当前进度值，支持自定义后缀（默认为 %）
  • 自定义模式：可填写任意自定义文本内容

示例图：

  • 中心文字默认显示当前值：

  • 自定义中心文字：

效果对比：

默认 vs 自定义

2）顺时针方向​

  • 默认开启，进度条顺时针增长
  • 关闭后，进度条将逆时针填充

效果对比：

顺时针/逆时针

3）起始位置​

控制进度条从哪个方向开始绘制：

  • 上（默认）
  • 下
  • 左
  • 右

配置界面：

起始位置设置

效果对比图：

四种起始位置

3. 外观设置​

外观设置入口

1）直径​

  • 控制整个环形进度条的尺寸
  • 默认值为 100px

尺寸效果示例（30px / 50px / 100px）：

2）线宽​

  • 控制环形线条的粗细，默认值为 40px

示例：

3）颜色与背景色​

  • 颜色：设置进度部分的颜色
  • 背景色：设置未完成部分的颜色

配置界面：

4. 状态​

无特殊状态项，通用状态说明详见：通用状态

二、样式​

暂无特殊样式配置，详见：通用样式

三、常见使用场景​

1. 上传进度展示​

用于上传文件、导入数据等场景，清晰显示当前进度。

示例：

上传进度