跳到主要内容

进度条

用于展示操作任务的当前进度，例如文件上传、数据导入或系统初始化等。

一、何时使用​

  • 显示任务或流程的完成百分比
  • 文件上传/下载进度展示
  • 表单提交或数据导入导出反馈
  • 安装或初始化任务的实时提示

二、属性配置​

1. 数据设置​

数据设置界面

数据来源方式：​

  • 手动赋值：直接设置固定进度值（如 70）
  • 数据绑定：绑定外部数据源，详见：数据绑定
  • 组件绑定：绑定当前组件所在的数据集字段
  • 视图参数：使用页面参数作为进度来源

示例：

数据配置示例

2. 功能设置​

功能设置界面

1）显示文本​

  • 控制是否显示当前百分比文本
  • 开启后将在进度条中显示如“75%”的文字

示例：

显示文本示例

2）自定义文本​

  • 替代默认百分比显示内容
  • 可用于展示如“处理中…”、“已完成”等说明文字

示例：

自定义文本示例

3. 外观设置​

外观设置面板

1）高度​

  • 设置进度条高度，支持 px/em/% 等单位

示例：

设置高度

2）进度条颜色​

  • 自定义进度条填充部分颜色

示例：

设置颜色

3）文字颜色​

  • 自定义文字内容颜色

示例：

设置文字颜色

4）背景色​

  • 自定义进度条的背景颜色

示例：

设置背景色

4. 状态​

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

三、样式设置​

无额外样式项，详见：通用样式

四、常见使用场景​

1. 文件上传进度​

展示上传进度如“45%”，缓解用户等待焦虑。

2. 数据导入/导出​

实时展示 Excel 导入或批量导出等任务的进度百分比。

3. 内容加载提示​

内容尚未加载完成时使用进度条替代 loading 动画，增强反馈明确性。

4. 多任务总进度展示​

如“同步了 5 / 20 条数据”，可通过进度条展示为 25%。