RadzenProgressBar Class

A linear progress bar component for indicating task completion or ongoing processes. RadzenProgressBar displays progress horizontally with determinate (specific value) or indeterminate (ongoing) modes. Provides visual feedback about the status of lengthy operations like file uploads, data processing, or multi-step workflows. Supports determinate mode showing specific progress value (0-100%) with a filling bar, indeterminate mode with animated bar indicating ongoing operation without specific progress, optional percentage or custom unit value display overlay, configurable Min/Max values for non-percentage scales, various semantic colors (Primary, Success, Info, Warning, Danger), custom template to override default value display, and ARIA attributes for screen reader support. Use determinate mode when you can calculate progress percentage (e.g., file upload, form completion). Use indeterminate mode for operations with unknown duration (e.g., waiting for server response).

Inheritance

Object

ComponentBase

RadzenComponent

RadzenProgressBar

RadzenProgressBarCircular

Implements

IComponent

IHandleEvent

IHandleAfterRender

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenProgressBar : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender

Examples

Determinate progress bar:

<RadzenProgressBar Value=@progress Max="100" ShowValue="true" ProgressBarStyle="ProgressBarStyle.Primary" />
@code {
    double progress = 45; // 45%
}

Indeterminate progress bar for loading:

@if (isLoading)
{
    <RadzenProgressBar Mode="ProgressBarMode.Indeterminate" ProgressBarStyle="ProgressBarStyle.Info" />
}

Custom range and unit:

<RadzenProgressBar Value=@bytesDownloaded Min="0" Max=@totalBytes Unit="MB" ShowValue="true" />

Constructors

RadzenProgressBarlink

A linear progress bar component for indicating task completion or ongoing processes. RadzenProgressBar displays progress horizontally with determinate (specific value) or indeterminate (ongoing) modes. Provides visual feedback about the status of lengthy operations like file uploads, data processing, or multi-step workflows. Supports determinate mode showing specific progress value (0-100%) with a filling bar, indeterminate mode with animated bar indicating ongoing operation without specific progress, optional percentage or custom unit value display overlay, configurable Min/Max values for non-percentage scales, various semantic colors (Primary, Success, Info, Warning, Danger), custom template to override default value display, and ARIA attributes for screen reader support. Use determinate mode when you can calculate progress percentage (e.g., file upload, form completion). Use indeterminate mode for operations with unknown duration (e.g., waiting for server response).

Declaration
public RadzenProgressBar()

Properties

AriaLabellink

Gets or sets the ARIA label for accessibility support. Announced by screen readers to describe the progress bar's purpose (e.g., "File upload progress").

Declaration
public string AriaLabel { get; set; }
Property Value
Type Description
stringGets or sets the ARIA label for accessibility support. Announced by screen readers to describe the progress bar's purpose (e.g., "File upload progress").

Maxlink

Gets or sets the maximum value of the progress range representing 100% completion.

Declaration
public double Max { get; set; }
Property Value
Type Description
doubleGets or sets the maximum value of the progress range representing 100% completion.

Minlink

Gets or sets the minimum value of the progress range. Use non-zero values for custom progress scales (e.g., 0-1000 for byte counts).

Declaration
public double Min { get; set; }
Property Value
Type Description
doubleGets or sets the minimum value of the progress range. Use non-zero values for custom progress scales (e.g., 0-1000 for byte counts).

Modelink

Gets or sets the progress bar mode determining the visual behavior. Determinate shows specific progress, Indeterminate shows continuous animation for unknown duration.

Declaration
public ProgressBarMode Mode { get; set; }
Property Value
Type Description
ProgressBarModeGets or sets the progress bar mode determining the visual behavior. Determinate shows specific progress, Indeterminate shows continuous animation for unknown duration.

NormalizedValuelink

Progress in range from 0 to 1.

Declaration
protected double NormalizedValue { get; }
Property Value
Type Description
doubleProgress in range from 0 to 1.

ProgressBarStylelink

Gets or sets the semantic color style of the progress bar. Determines the progress bar color: Primary, Success, Info, Warning, Danger, etc.

Declaration
public ProgressBarStyle ProgressBarStyle { get; set; }
Property Value
Type Description
ProgressBarStyleGets or sets the semantic color style of the progress bar. Determines the progress bar color: Primary, Success, Info, Warning, Danger, etc.

ShowValuelink

Gets or sets whether to display the progress value as text overlay on the progress bar. When true, shows the value with the unit (e.g., "45%"). Set to false for a cleaner look.

Declaration
public bool ShowValue { get; set; }
Property Value
Type Description
boolGets or sets whether to display the progress value as text overlay on the progress bar. When true, shows the value with the unit (e.g., "45%"). Set to false for a cleaner look.

Templatelink

Gets or sets a custom template for rendering content overlaid on the progress bar. Use this to display custom progress information instead of the default value/percentage display.

Declaration
public RenderFragment Template { get; set; }
Property Value
Type Description
RenderFragmentGets or sets a custom template for rendering content overlaid on the progress bar. Use this to display custom progress information instead of the default value/percentage display.

Unitlink

Gets or sets the unit text displayed after the value (e.g., "%", "MB", "items"). Only shown when ShowValue is true.

Declaration
public string Unit { get; set; }
Property Value
Type Description
stringGets or sets the unit text displayed after the value (e.g., "%", "MB", "items"). Only shown when ShowValue is true.

Valuelink

Gets or sets the current progress value. Should be between Min and Max. Values outside this range are clamped.

Declaration
public double Value { get; set; }
Property Value
Type Description
doubleGets or sets the current progress value. Should be between Min and Max. Values outside this range are clamped.

ValueChangedlink

Gets or sets a callback invoked when the progress value changes. Note: This is an Action, not EventCallback. For data binding, the Value property is typically bound directly.

Declaration
public Action<double> ValueChanged { get; set; }
Property Value
Type Description
Action<double>Gets or sets a callback invoked when the progress value changes. Note: This is an Action, not EventCallback. For data binding, the Value property is typically bound directly.

Methods

BuildRenderTreelink

Declaration
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
Parameters
Type Name Description
Rendering.RenderTreeBuilder __builder

GetComponentCssClasslink

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
An error has occurred. This app may no longer respond until reloaded. Reload 🗙