Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxProgressBar Class

A progress bar component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxProgressBar :
    DxComponentBase

#Remarks

The DevExpress Progress Bar for Blazor (<DxProgressBar>) allows you to inform users about the status of ongoing processes.

Run Demo

#Add a Progress Bar to a Project

Follow the steps below to add a Progress Bar component to an application:

  1. Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
  2. Add the <DxProgressBar></DxProgressBar> markup to a .razor file.
  3. Write code to update the Progress Bar value or enable the indeterminate state.
  4. Optional. Specify the progress bar type: horizontal, vertical, or circular.

#.NET 8 and .NET 9 Specifics

Blazor Progress Bar does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

#Value

The Value property specifies the current progress bar value. MinValue and MaxValue properties limit the range of accepted values.

The progress is measured in percentages and calculated by the following formula:
(Value - MinValue) / (MaxValue - MinValue) * 100.

Run Demo: Progress Bar - Overview

razor
<DxProgressBar MinValue="100" MaxValue="500" Value="200" />

Progress bar value and percentage calculation

If the current progress is unknown, you can display an indeterminate progress bar.

#Progress Status

Use the Status property to specify the progress status. The status affects bar appearance, the icon, and the default label.

Progress bar statuses

If the Status property is not specified, the component automatically sets the Success status when Value matches MaxValue. You can set the SetSuccessStatusOnComplete property to false to disable this behavior.

#Label

The progress bar label displays information about progress status. The label shows the progress in percentages, and the corresponding text for the Success, Pause, and Error statuses.

Run Demo: Indeterminate Progress Bar

Use the Label property to customize the progress bar label.

razor
<DxProgressBar Label="Loading..." ... />

Progress bar label

You can use the LabelPosition property to specify the position of the label relative to the progress bar. To hide the label, set the ShowLabel property to false.

#Indeterminate State

When progress cannot be estimated or it is not necessary to indicate the progress numerically, set the Indeterminate property to true to display a moving bar.

Run Demo: Indeterminate Progress Bar

razor
<DxProgressBar Label="Loading..." Indeterminate="true" />

#Vertical and Circular Progress Bar

The DxProgressBar component renders a linear horizontal progress bar. Use the Type property to change the bar type to vertical or circular.

Run Demo: Progress Bar Types

razor
<DxProgressBar Type="ProgressBarType.Horizontal" Value="35" />
<DxProgressBar Type="ProgressBarType.Vertical" Value="35" />
<DxProgressBar Type="ProgressBarType.Circular" Value="35" />

Circular progress bar

#Inheritance

See Also