进度条

1. 组件概述

进度条是一个内容展示组件，用于以可视化方式展示任务进度或完成比例。它支持三种展示类型：线形（横向条状）、圆形（环形）和仪表盘，可以根据不同的进度值显示不同的颜色，帮助用户直观地了解当前状态。进度条常用于展示 AI 处理进度、学习完成度、答题正确率等需要量化展示的场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：学习进度展示。在学习辅导类应用中，使用进度条展示学生的课程学习进度或知识点掌握程度。可以配置不同颜色区间（如 0-60% 显示红色表示需要加强，60-80% 显示黄色表示良好，80-100% 显示绿色表示优秀），让学生一目了然地了解自己的学习状态。
• 场景二：AI 任务完成度。在 AI 工具类应用中，当工作流执行较长时间的任务时，使用进度条展示任务完成百分比。将进度条绑定到工作流返回的进度变量，实时更新显示，让用户了解当前处理进度。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基本折叠组

配置项	说明
类型	进度条的展示形式。可选：线形（横向条状，最常用）、圆形（完整的环形）、仪表盘（带缺口的环形，类似汽车仪表盘）。不同类型适用于不同的视觉风格需求。
进度数据	进度条显示的数值，范围通常为 0-100。可以设置为静态数值，也可以绑定变量实现动态更新。例如绑定工作流返回的进度变量，进度条会随变量值变化自动刷新。
显示数值	是否在进度条上显示具体的百分比数字。默认开启。关闭后只显示进度条本身，不显示数值文字。
占位提示	当进度数据未定义时显示的替代文字，默认为”-“。注意：当进度值为 0 时不会显示占位提示，只有数据完全未定义时才会显示。

状态折叠组

配置项	说明
可见	控制进度条是否显示。默认可见。
隐藏	控制进度条是否隐藏。与「可见」相反。

设计

基本折叠组

配置项	说明
尺寸	进度条的整体大小。可选：极小、小、中、大、默认。默认会占满容器宽度。根据页面布局选择合适的尺寸。
线条宽度	进度条线条的粗细程度，数值范围 0-100，默认为 6。数值越大线条越粗。线形进度条表现为条的高度，圆形和仪表盘表现为环的宽度。
缺口角度	仅在类型为「仪表盘」时显示。设置仪表盘底部缺口的大小，数值范围 0-295，默认为 75。数值越大缺口越大，0 表示无缺口（等同于圆形）。
缺口位置	仅在类型为「仪表盘」时显示。设置仪表盘缺口的方向，可选：上、下、左、右。默认为下方，即缺口在底部。
显示动画	仅在类型为「线形」时显示。开启后进度条会有流动的动画效果，使进度展示更加生动。适合用于表示正在进行中的任务。
样式	仅在类型为「线形」时显示。进度条的填充样式，可选：纯色（单一颜色填充）、条纹（斜条纹效果）。条纹样式配合动画效果更明显。
颜色	配置不同进度区间显示不同颜色。可以添加多个颜色段，每段设置颜色和对应的进度阈值。例如：红色对应 20（0-20% 显示红色）、黄色对应 60（20-60% 显示黄色）、绿色对应 100（60-100% 显示绿色）。如果只配置一个颜色不设置阈值，则整个进度条使用该颜色。