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.


label: stringText to be placed above the progress bar.
helperText: stringHelper text to be placed under the progress bar.
overlay: booleanfalseIf true, the progress bar will be displayed as a modal.
value: numberThe value of the progress indicator. If it's received the component is determinate otherwise is indeterminate.
showValue: booleanfalseIf true, the value is displayed above the progress bar.
margin: string | objectSize of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.


Basic Usage