Select theme:

Material 3

ProgressBar (Angular)link

This guide demonstrates how to use the ProgressBar component.

ProgressBarlink

NameTypeDefaultDescription
Namestring'progressbar' + index suffixUnique name of the ProgressBar.
Valuenumber or expressionnullThe current value of the ProgressBar
Unitstring%The unit the ProgressBar
ShowValuebooleantrueWhether to display the value or not
Modedeterminate or indeterminatedeterminateWhether the ProgressBar shows a value (determinate) or indeterminate animation

Configurationlink

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

image

In this article —

Get started today

Radzen is free to use. You can also test the premium features for 15 days.

Download Now
© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3