Radzen Blazor Studio alpha is available! Get Now

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}.

We are here for you

Making our users happy is always a priority for us.