ProgressBar (Angular)

This guide demonstrates how to use the ProgressBar component.


Name Type Default Description
Name string ‘progressbar’ + index suffix Unique name of the ProgressBar.
Value number or expression null The current value of the ProgressBar
Unit string % The unit the ProgressBar
ShowValue boolean true Whether to display the value or not
Mode determinate or indeterminate determinate Whether the ProgressBar shows a value (determinate) or indeterminate animation


The only required property of the ProgressBar component is Value. It specifies the current value of the ProgressBar and should be in the range from 0 to 100 as it represents percentage of completion.

You can set the Value to a literal number e.g. 50 or data-bind it by setting it to some expression e.g. ${progressValue}.