| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
delay | If true, the indicator will not render as visible until 1sec after the visible prop is set to true. This is a best estimate to avoid visual flicker where progress is resolved within 1sec. | false | boolean |
focusOnVisible | If true, upon visible render the indicator element will take focus. | false | boolean |
liveConfig | Triggers live announcement on show and value or message change. | | { contextualLabel: string;} |
maxValue | Maximum possible value. | 100 | number |
message | Provides a message to the user along with the component. | | string |
minValue | Minimum possible value. | 0 | number |
onTransitionEndIn | | () => void | |
onTransitionEndOut | | () => void | |
placement | Determines the placement of the component. | 'global' | 'inline' |'block' |'global' |'local' |
ref | Ref to the visual indicator element, currently a role of progressbar. | | Ref<HTMLDivElement> |
value | Current progress value within the range specified, or the default range of 0-100. | | number |
variant | Determines which variant should be rendered. | 'ring' | 'ellipsis' |'ring' |'bar' |
visible | When true, fade in occurs when component mounts. When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM. This is technically not the same as unmounting via parent. Applicable for all placements but the fade effect is only applicable to 'global' | 'local' placement. | true | boolean |
Progress
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The Progress component is used to provide feedback to a user for an action or event that may have a perceptible duration.
Usage
The Progress component will render in an indeterminate state by default. This will result in an endless animation loop for the chosen variant. If a value is passed to the Progress component, it will render in a determinate state displaying the Progress between that value and the minValue and maxValue range of the progression. This range is from 0 to 100 by default.
The Progress component will only be visible on screen when the visible prop is true. There are three placements the Progress component may render in:
- local: Renders above a backdrop that is confined to its parent container.
- global: Renders above a backdrop that engulfs the entire viewport.
- inline: Renders inline with its DOM siblings.
- block: Renders as display block around its DOM siblings.
If the Progress component is only set visible for less than 100ms, it will not render at all. This is done to prevent a quick flash of the component on the screen for very short load times. If the visible prop is on for 100ms or more, the Progress component will stay rendered for at least 1 full second.
Disclaimer: By selecting the global placement in the demo below, the entire screen will be disabled, requiring a refresh of your browser to continue.