Progress Bar - Amazon Vega Docs

The Progress Bar component displays a progress bar to show ongoing activity. When undefined, the progress bar shows an indeterminate indicator.

Usage

import { ProgressBar } from '@amazon-devices/kepler-ui-components';

<ProgressBar
    progress={50}
    size={"xl"}
/>

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

To customize the progress bar, use the following props:

The component supports themes. Themes currently apply to the borderRadius, height, width, and backgroundColor styles.

This video demonstrates a determinate progress bar.

This video demonstrates an indeterminate progress bar.

This video dynamically toggles between indeterminate and determinate indicators at runtime.