Progress

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

Reference

Type

ComponentType<ProgressProps>

Examples

React

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>
    )
  }
}

Vue

<template>
  <view class="components-page">
    <progress percent="20" stroke-width="2" :show-info="true" />
    <progress percent="40" stroke-width="2" :active="true" />
    <progress percent="60" stroke-width="2" :active="true" />
    <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
  </view>
</template>

ProgressProps

Property	Type	Default	Required	Description
percent	number		No	0 to 100 percent.
showInfo	boolean	false	No	Shows the percent on the right of the progress bar.
borderRadius	string | number	0	No	The radius of the round corner.
fontSize	string | number	16	No	The font size of the percent on the right.
strokeWidth	string | number	6	No	The width of the stroke on the progress bar.
color	string	"#09BB07"	No	The color of the progress bar (Use activeColor).
activeColor	string	"#09BB07"	否	The color of the selected progress bar.
backgroundColor	string	"#EBEBEB"	No	The color of the unselected progress bar.
active	boolean	false	No	The animation where the progress bar moves from left to right.
activeMode	"backwards" | "forwards"	backwards	否	The 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.
duration	number	30	No	Number of milliseconds to increase progress by 1%.
onActiveEnd	BaseEventOrigFunction<any>		No	Triggered on animation completion.

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React 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

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Progress	✔️	✔️	✔️	✔️	✔️	✔️