Select theme:

NEWBlazor Charts Deep Dive: Candlestick, Box Plot, Waterfall, and 30+ More Free Chart Types

ProgressBar (Angular)Link to this section

This guide demonstrates how to use the ProgressBar component.

ProgressBarLink to this section

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 to this section

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-2026 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.
IP Geolocation by DB-IP

Select theme: