Progress 进度条

以横向进度条展示任务进度，可选择显示百分比。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 展示当前进度 -->
<fui-progress :percent="60" showInfo />

属性

属性	类型	说明	官网默认值
percent	Number / String	进度百分比，范围 0–100	0
height	Number / String	进度条高度，单位 rpx	8
radius	Number / String	圆角，单位 rpx	8
showInfo	Boolean	是否显示右侧百分比	false
size	Number / String	百分比字号，单位 rpx	28
color	String	百分比文字颜色	#333
percentWidth	Number / String	百分比文本区域宽度，单位 rpx	96
background	String	未完成部分颜色	#CCCCCC
activeColor	String	已完成部分颜色	#465CFF
duration	Number / String	每增加 1% 的动画时间，单位毫秒	15

事件

事件	说明	回调参数
activeend	进度动画完成时触发	{}

平台说明

非 nvue 平台的 activeColor 本地默认值为空，可通过 --fui-color-primary 调整默认颜色。部分设备或 Android nvue 的圆角可能不生效。

插槽

插槽	说明
—	官网未列出该组件的插槽