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.
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
- Use the
<TelerikProgressBar>tag. - Set its
Valueparameter to adoubleto 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. |