Progress Bar
Progress indicators offer visibility of system status to the user, giving feedback to indicate that the application is taking some time to processing data. The main aim of these components is to reduce the user's uncertainty about offering something to look at while the user is waiting for the end. A progress bar should be used in any scenario that will take more than 1 second in performing the action, for anything that takes less than that time, it will be distracting for the user.
| Name | Type | Description | Default |
|---|---|---|---|
| label | string | Text to be placed above the progress bar. | - |
| helperText | string | Helper text to be placed under the progress bar. | - |
| overlay | boolean | If true, the progress bar will be displayed as a modal. | false |
| value | number | The value of the progress indicator. If it's received the component is determinate otherwise is indeterminate. | - |
| showValue | boolean | If true, the determined value is displayed above the progress bar. | false |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | - |
| ariaLabel | string | Specifies a string to be used as the name for the progress bar element when no label is provided. | 'Progress bar' |
() => { const [isVisible, changeIsVisible] = useState(false); const showModal = () => { changeIsVisible(true); fetchData().then(() => { changeIsVisible(false); }); }; const fetchData = () => { return new Promise((resolve) => { setTimeout(() => { resolve(); }, 3000); }); }; return ( <DxcInset space="2rem"> <DxcFlex direction="column" gap="2rem" alignItems="flex-start"> <DxcButton label="Show Progress Bar for 3 seconds" onClick={showModal} /> {isVisible && ( <DxcProgressBar label="Loading" overlay /> )} </DxcFlex> </DxcInset> ); }