Class RadzenProgressBar

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

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnInitialized()

RadzenComponent.SetParametersAsync(ParameterView)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenProgressBar : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

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

RadzenProgressBar()

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()

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" />

Properties

AriaLabel

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

[Parameter]
public string AriaLabel { get; set; }

Property Value

Type	Description
string	The ARIA label text for screen readers.

Max

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

Declaration

[Parameter]
public double Max { get; set; }

Property Value

Type	Description
double	The maximum value. Default is 100.

Min

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

[Parameter]
public double Min { get; set; }

Property Value

Type	Description
double	The minimum value. Default is 0.

Mode

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

Declaration

[Parameter]
public ProgressBarMode Mode { get; set; }

Property Value

Type	Description
ProgressBarMode	The progress mode. Default is Determinate.

NormalizedValue

Progress in range from 0 to 1.

Declaration

protected double NormalizedValue { get; }

Property Value

Type	Description
double

ProgressBarStyle

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

Declaration

[Parameter]
public ProgressBarStyle ProgressBarStyle { get; set; }

Property Value

Type	Description
ProgressBarStyle	The progress bar style. Default uses the theme's default progress color.

ShowValue

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

[Parameter]
public bool ShowValue { get; set; }

Property Value

Type	Description
bool	true to show the value text; false to hide it. Default is true.

Template

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

[Parameter]
public RenderFragment Template { get; set; }

Property Value

Type	Description
RenderFragment	The custom content template render fragment.

Unit

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

Declaration

[Parameter]
public string Unit { get; set; }

Property Value

Type	Description
string	The unit text. Default is "%".

Value

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

Declaration

[Parameter]
public double Value { get; set; }

Property Value

Type	Description
double	The current progress value.

ValueChanged

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

[Parameter]
public Action<double> ValueChanged { get; set; }

Property Value

Type	Description
Action<double>	The value changed callback.

Methods

BuildRenderTree(RenderTreeBuilder)

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

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable