组件：进度条

进度条组件用于直观展示任务、操作或流程的完成进度，以水平条形图的形式呈现当前进度百分比。支持自定义进度颜色、背景色、宽度和高度，适用于文件上传/下载、数据加载、任务处理、表单提交等需要反馈进度的场景。

典型使用场景：

文件上传/下载进度（用户上传附件、下载资源）
数据加载/处理进度（导入大量数据、批量计算）
表单或流程完成度（注册流程、多步表单）
游戏或应用内任务进度（经验值、任务完成率）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置进度值（0~100）	`进度值`	`进度条1.进度值 = 75`
设置进度颜色	`颜色`	`进度条1.颜色 = "#52c41a"`
设置轨道背景色	`背景颜色`	`进度条1.背景颜色 = "#f5f5f5"`
调整进度条尺寸	`宽度` / `高度`	`进度条1.宽度 = 400`，`进度条1.高度 = 20`

样式美化参考

进度条的外观主要通过以下属性调整：

整体容器：通过 宽度、高度 控制进度条的粗细和长度，背景颜色 设置轨道底色（未填充部分），边框圆角 可使两端圆润。
进度填充：通过 颜色 属性设置填充部分的颜色，支持颜色名称、十六进制值（如 #1890ff）或 RGB。
内联样式：如需更精细的控制（如渐变、阴影），可通过 内联样式 或 追加内联样式 方法添加自定义 CSS。
显示文本：进度条本身不显示百分比文本，可结合 标签 组件在旁边显示。

基础示例

一个简单的进度条，展示 60% 的完成度，蓝色填充，灰色背景。

变量 进度条1 = 创建 进度条()
进度条1.左边 = 50
进度条1.顶边 = 100
进度条1.宽度 = 300
进度条1.高度 = 16
进度条1.颜色 = "#1890ff"
进度条1.进度值 = 60
进度条1.背景颜色 = "#e8e8e8"
进度条1.边框圆角 = 8  ' 圆角效果
添加组件(进度条1)

综合示例：模拟文件上传进度

本示例模拟文件上传过程，通过点击按钮触发进度从 0 逐步增加至 100%，并在过程中更新显示标签。

' ========== 创建界面元素 ==========
' 进度条
变量 进度条_上传 = 创建 进度条()
进度条_上传.左边 = 30
进度条_上传.顶边 = 30
进度条_上传.宽度 = 340
进度条_上传.高度 = 20
进度条_上传.颜色 = "#1890ff"
进度条_上传.背景颜色 = "#e8e8e8"
进度条_上传.边框圆角 = 10
进度条_上传.进度值 = 0
添加组件(进度条_上传)

' 进度百分比标签
变量 标签_百分比 = 创建 标签()
标签_百分比.左边 = 380
标签_百分比.顶边 = 28
标签_百分比.宽度 = 60
标签_百分比.文本 = "0%"
标签_百分比.字体大小 = 14
标签_百分比.字体粗细 = "bold"
标签_百分比.文本颜色 = "#1890ff"
添加组件(标签_百分比)

' 状态标签
变量 标签_状态 = 创建 标签()
标签_状态.左边 = 30
标签_状态.顶边 = 65
标签_状态.宽度 = 300
标签_状态.文本 = "等待开始..."
标签_状态.文本颜色 = "#999"
标签_状态.字体大小 = 12
添加组件(标签_状态)

' 开始上传按钮
变量 按钮_上传 = 创建 按钮()
按钮_上传.左边 = 30
按钮_上传.顶边 = 100
按钮_上传.宽度 = 120
按钮_上传.高度 = 36
按钮_上传.文本 = "开始上传"
按钮_上传.背景颜色 = "#1890ff"
按钮_上传.文本颜色 = "#ffffff"
按钮_上传.边框圆角 = 6
添加组件(按钮_上传)

' 重置按钮
变量 按钮_重置 = 创建 按钮()
按钮_重置.左边 = 170
按钮_重置.顶边 = 100
按钮_重置.宽度 = 100
按钮_重置.高度 = 36
按钮_重置.文本 = "重置"
按钮_重置.背景颜色 = "#d9d9d9"
按钮_重置.文本颜色 = "#333"
按钮_重置.边框圆角 = 6
添加组件(按钮_重置)

' ========== 业务逻辑 ==========
' 模拟上传进度更新
函数 模拟上传()
    ' 禁用按钮，防止重复点击
    按钮_上传.禁用 = 真
    标签_状态.文本 = "正在上传..."
    标签_状态.文本颜色 = "#1890ff"
    
    变量 当前进度 = 0
    变量 时钟ID = 创建时钟(() => {
        当前进度 = 当前进度 + 取随机整数(5, 15)  ' 随机增量
        如果(当前进度 > 100)
            当前进度 = 100
        结束 如果
        
        进度条_上传.进度值 = 当前进度
        标签_百分比.文本 = 当前进度 + "%"
        
        如果(当前进度 >= 100)
            销毁时钟(时钟ID)
            标签_状态.文本 = "上传完成！"
            标签_状态.文本颜色 = "#52c41a"
            按钮_上传.禁用 = 假
            弹出提示("文件上传成功")
        结束 如果
    }, 300)  ' 每300ms更新一次
结束 函数

' 开始上传按钮点击
按钮_上传.置被单击回调((源对象, 事件对象) => {
    模拟上传()
})

' 重置按钮点击
按钮_重置.置被单击回调((源对象, 事件对象) => {
    进度条_上传.进度值 = 0
    标签_百分比.文本 = "0%"
    标签_状态.文本 = "等待开始..."
    标签_状态.文本颜色 = "#999"
    按钮_上传.禁用 = 假
})

属性详解

进度值

类型： 数值型
说明： 设置或获取当前进度值，取值范围为 0 到 100（包含）。超出范围的值会被自动裁剪到边界。设置后进度条会立即刷新显示。

颜色

类型： 文本型
说明： 设置或获取进度填充部分的颜色。支持 CSS 颜色值，如颜色名称（"red"）、十六进制（"#ff0000"）、RGB（"rgb(255,0,0)"）等。默认值为蓝色系（由框架主题决定）。

⚠️ 注意事项

进度值范围：进度值 必须为 0~100 之间的数值，超出范围会被裁剪。例如设置 进度值 = 120 实际会显示为 100。
进度颜色可自定义：颜色 属性支持任意 CSS 颜色值，可根据进度状态动态切换（如 <30% 为红色，30~70% 为黄色，>70% 为绿色）。
无内置文本：进度条本身不显示百分比文字，如需显示，请配合 标签 组件使用。
动态更新：通过定时器或网络请求回调中不断修改 进度值，可实现平滑动画效果。
高度影响外观：进度条的高度不宜过大（通常 8~24px），否则视觉效果较差。宽度则根据布局自由设置。
与滑块条的区别：进度条是只读的，用于展示进度；滑块条是可交互的，用于让用户选择值。

轻语言网站开发SDK文档