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 100 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 text representation of the current progress. It is rendered inside the ProgressBar and by default shows the component value in percent. The ProgressBar allows customization of the label position and content. Use the label template to override the default percent label if the ProgressBar Max 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:

Attribute 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. This value indicates the progress of the tracked process. It is a fraction of the Max.
Orientation ProgressBarOrientation enum
(ProgressBarOrientation.Horizontal)
The orientation of the ProgressBar. Takes a member of the ProgressBarOrientation enum - Horizontal or Vertical.

Next Steps

See Also

In this article