UniApp 组件 · 实验
UGProgress 进度条
用于展示任务完成度的线性进度条。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-progress>，无需在页面脚本中导入组件。
vue
<template><ug-progress :percent="68" label="上传进度" active /></template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-progress/ug-progress.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| percent | number | 0 | 进度百分比，组件限制到 0–100。 |
| showInfo | boolean | false | 显示原生百分比文字。 |
| strokeWidth | number | 4 | 进度条宽度，单位 px。 |
| active | boolean | false | 启用原生进度动画。 |
| activeMode | 'backwards' | 'forwards' | 'backwards' | 动画从头开始或从上次位置继续。 |
| duration | number | 30 | 进度增加 1% 所需毫秒数。 |
| tone | 'primary' | 'success' | 'danger' | 'primary' | 进度语义色调。 |
| color | string | 按 tone | 覆盖活动进度颜色。 |
| backgroundColor | string | Token surfaceMuted | 轨道背景色。 |
| label | string | — | 进度条上方说明；存在时同时显示百分比。 |
事件
当前组件没有公开事件。
注意事项
- 不可量化的等待状态使用 Spinner。
- percent 超出范围时只在渲染层限制，不修改业务数据。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证