进度条组件，支持线形和环形两种类型。环形进度条支持在中间显示文字或 fs-icon 图标。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置。

"usingComponents": {
  "fs-progress": "ava-ui/fxui/fs-progress/index"
}

代码演示

API

Props

参数	说明	类型	默认值
type	类型，line（线形）/ circle（环形）	String	line
percent	进度值，范围 0-100	Number	0
color	进度颜色	String	#00C566
trackColor	轨道背景色	String	#EAEAEA
strokeWidth	线形进度条高度（rpx）	Number	8
size	环形画布大小（rpx）	Number	120
circleStrokeWidth	环形线宽（rpx）	Number	8
showText	是否显示文字	Boolean	true
text	自定义文字，为空时显示百分比	String	''
icon	环形中间图标 icon name（使用 fs-icon，设置时文字隐藏）	String	''
iconSize	icon 大小	String/Number	40
iconColor	icon 颜色，默认跟随 color	String	''
round	线形进度条是否显示圆角	Boolean	true
extStyle	外部自定义样式	String	''

Events

事件名	说明	回调参数
—	无	—

使用示例

线形进度条

<fs-progress type="line" percent="{{50}}" />
<fs-progress type="line" percent="{{50}}" color="#7B61FF" />

环形进度条（文字）

<fs-progress type="circle" percent="{{75}}" size="120" />

环形进度条（icon）

<fs-progress type="circle" percent="{{75}}" size="120" icon="time-2" />

---

预览

打开预览