Progress Bar
Open Beta Documentation Amazon offers this technical
documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback
and iterates on the features. For the most current feature information, see the latest Release
Notes.
The Progress Bar component displays a progress bar to show ongoing activity. When undefined, the progress bar shows an indeterminate indicator.
Usage
Import
import { ProgressBar } from '@amazon-devices/kepler-ui-components';
Example
<ProgressBar
progress={50}
size={"xl"}
/>
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 the progress, 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.
Interactivity
| Modality | Available |
|---|---|
| D-pad | No |
| Touch | No |
| Voice | No |
Accessibility
| Prop | Availability |
|---|---|
accessible |
Yes |
accessibilityRole |
Yes |
accessibilityLabel |
Yes |
accessibilityValue |
Yes |
accessibilityActions |
No |
accessibilityState |
No |
UI experience
Determinate
This video demonstrates a determinate progress bar.
Indeterminate
This video demonstrates an indeterminate progress bar.
Toggling
This video dynamically toggles between indeterminate and determinate indicators at runtime.
Last updated: Jun 23, 2026
