Skip to main content
Version: 3.x

Progress

progress。 The unit of length of the component's properties is px by default.

Reference

Type

ComponentType<ProgressProps>

Examples

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Progress percent={20} showInfo strokeWidth={2} />
<Progress percent={40} strokeWidth={2} active />
<Progress percent={60} strokeWidth={2} active />
<Progress percent={80} strokeWidth={2} active activeColor='blue' />
</View>
)
}
}

ProgressProps

PropertyTypeDefaultRequiredDescription
percentnumberNo0 to 100 percent.
showInfobooleanfalseNoShows the percent on the right of the progress bar.
borderRadiusstring | number0NoThe radius of the round corner.
fontSizestring | number16NoThe font size of the percent on the right.
strokeWidthstring | number6NoThe width of the stroke on the progress bar.
colorstring"#09BB07"NoThe color of the progress bar (Use activeColor).
activeColorstring"#09BB07"The color of the selected progress bar.
backgroundColorstring"#EBEBEB"NoThe color of the unselected progress bar.
activebooleanfalseNoThe animation where the progress bar moves from left to right.
activeMode"backwards" | "forwards"backwardsThe value "backwards" indicates that the animation plays from the beginning, and the value "forwards" indicates that the animation plays from the point at which it paused.
durationnumber30NoNumber of milliseconds to increase progress by 1%.
onActiveEndBaseEventOrigFunction<any>NoTriggered on animation completion.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
ProgressProps.percent✔️✔️✔️✔️✔️✔️
ProgressProps.showInfo✔️✔️✔️✔️✔️
ProgressProps.borderRadius✔️✔️
ProgressProps.fontSize✔️✔️
ProgressProps.strokeWidth✔️✔️✔️✔️✔️✔️
ProgressProps.color✔️✔️✔️✔️✔️
ProgressProps.activeColor✔️✔️✔️✔️✔️✔️
ProgressProps.backgroundColor✔️✔️✔️✔️✔️✔️
ProgressProps.active✔️✔️✔️✔️✔️✔️
ProgressProps.activeMode✔️✔️✔️✔️✔️
ProgressProps.duration✔️✔️
ProgressProps.onActiveEnd✔️✔️

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Progress✔️✔️✔️✔️✔️✔️