Blazor ProgressBar Overview

The Blazor ProgressBar component tracks the execution of operations and displays what portion of it is completed. For very long tasks, you can also make it indeterminate.

Telerik UI for Blazor Ninja image

The ProgressBar component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor ProgressBar

  1. Use the <TelerikProgressBar> tag.
  2. Set its Value parameter to a double to denote how much is completed.

ProgressBar with maximum and initial values

@*Set the maximum and the current values of the ProgressBar*@

<TelerikProgressBar Max="@MaxValue" Value="@PBValue" />

@code {
    public double MaxValue { get; set; } = 100;
    public double PBValue { get; set; } = 10;
}

Label

The label is a representation of the current progress. Depending on the theme, it renders inside or next to the ProgressBar and by default shows the component Value with an appended percent sign %. The ProgressBar allows customization of the label position and content. Use the label template to show the desired percent progress if the ProgressBar Max parameter is not 100.

Indeterminate State

In some scenarios the estimated time of completion is unknown or the progress cannot be strictly measured. The ProgressBar supports continuous animation that can cover these cases. Read more about the ProgressBar Indeterminate State...

Responsive ProgressBar

The ProgressBar will resize with the parent element dimensions when you set its width to 100%:

<div style="width: 50%; border: 1px solid red;">

    <style>
        .width-100 {
            width: 100%;
        }
    </style>

    <TelerikProgressBar Class="width-100" Value="44" />
</div>

ProgressBar Parameters

The ProgressBar provides the following features to further customize its behavior:

Parameter Type and Default Value Description
Class string The CSS class that will be rendered on the main wrapping element. You can use it to cascade styles more easily.
Max double
100
The maximum value of the ProgressBar. It must be greater than 0.
Value double The value of the ProgressBar, which indicates the progress of the tracked process as a percentage. If Max is not 100 or Value is not a percent number, then use a ProgressBar label template to display the component value in the desired format and precision.
Orientation ProgressBarOrientation enum
(Horizontal)
The orientation of the ProgressBar. It can be Horizontal or Vertical.

Next Steps

See Also

In this article