Progress Bar component displays a progress bar to show ongoing activity. When undefined, the progress bar shows an indeterminate indicator.
Usage
Import
Example
Props
| Prop | Type | Default Value | Required | Description |
|---|---|---|---|---|
progress | Number | N/A | No | A number from 0 and 100 that represents % progressed. If undefined, shows an indeterminate progress indicator. |
animationDuration | Number | 250 ms for determinate, 1000 ms for indeterminate | No | The duration of the progress animation, in milliseconds |
indicatorColor | ColorValue | Determined by theme | No | Color of the progress indicator |
trackColor | ColorValue | Determined by theme | No | Color of the progress track (container) |
size | SizeVariantAll | ”md” | No | Size of the progress bar. Supports ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘xxl’ |
barStyle | ViewStyle | Determined by theme | No | Style override for bar (also referred to as the track or container) |
indicatorStyle | ViewStyle | Determined by theme | No | Style override for indicator |
Customization
You can customize the progress bar using theprogress, animationDuration, indicatorColor, trackColor, size, barStyle, indicatorStyle, and rtl props.
Theme support is available, and is currently applied for the borderRadius, height, width, and backgroundColor styles of the component.
