fs-progress progress bar component

A progress bar component that supports both line and circle types. The circle progress bar supports displaying text or an fs-icon icon in the center.

Usage

Local import — configure it in the index.json of the page or component that needs it.

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

Code demos

API

Props

Parameter	Description	Type	Default
type	Type, line (linear) / circle (circular)	String	line
percent	Progress value, range 0-100	Number	0
color	Progress color	String	#00C566
trackColor	Track background color	String	#EAEAEA
strokeWidth	Linear progress bar height (rpx)	Number	8
size	Circle canvas size (rpx)	Number	120
circleStrokeWidth	Circle stroke width (rpx)	Number	8
showText	Whether to show text	Boolean	true
text	Custom text; shows percentage when empty	String	''
icon	Center icon name for the circle (uses fs-icon; when set, text is hidden)	String	''
iconSize	Icon size	String/Number	40
iconColor	Icon color; follows color by default	String	''
round	Whether the linear progress bar shows rounded corners	Boolean	true
extStyle	External custom style	String	''

Events

Event name	Description	Callback parameters
—	None	—

Usage examples

Linear progress bar

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

Circle progress bar (text)

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

Circle progress bar (icon)

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

---

Preview

打开预览