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 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. |