Select theme:

Material 3
warning

You are viewing the legacy Radzen documentation.

Radzen Blazor Studio has replaced Radzen as the primary RAD tool for Blazor applications.

Radzen Blazor Studio offers a modern UI, enhanced features, and improved performance to streamline your development process.

The latest documentation for Radzen Blazor Studio is available here: https://www.radzen.com/blazor-studio/documentation/

Open Radzen Blazor Studio docs

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.

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

Select theme:

Material 3