Skip to main content

Blazor Progress

Documentation and examples for using the Blazor Bootstrap progress component featuring support for stacked bars, animated backgrounds, and text labels.

Blazor Progress

Progress Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.0.0
Heightdouble16Gets or sets the height of the Progress. Height is measured in pixels, and the default height is 16 pixels.1.0.0

ProgressBar Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ColorProgressColorProgressColor.NoneGets or sets the progress color.1.0.0
LabelstringnullGets or sets the progress bar label.1.0.0
TypeProgressTypeProgressType.DefaultGets or sets the progress bar type.1.0.0
Widthdouble0Get or sets the progress bar width.1.0.0

ProgressBar Methods

NameDescription
DecreaseWidthDecrease the progress bar width.
GetWidthGet the progress bar width.
IncreaseWidthIncrease the progress bar width.
SetColorSet the progress bar color.
SetLabelSet the progress bar label.
SetWidthSet the progress bar width.

Examples

How it works

Blazor Progress - How it works
<Progress Class="mb-3">
<ProgressBar />
</Progress>
<Progress Class="mb-3">
<ProgressBar Width="20" Label="20%" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Success" Width="40" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Warning" Width="60" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Danger" Width="70" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Dark" Width="80" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Success" Width="20" />
<ProgressBar Color="ProgressColor.Info" Width="20" />
<ProgressBar Color="ProgressColor.Warning" Width="20" />
<ProgressBar Color="ProgressColor.Danger" Width="30" />
</Progress>

See demo here.

Labels

Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.

Blazor Progress - Labels
<Progress Class="mb-3">
<ProgressBar Width="20" Label="20%" />
</Progress>

See demo here.

Set width programmatically

Use IncreaseWidth() or DecreaseProgressBar() methods to increase or decrease the Blazor ProgressBar width.

Blazor Progress - Set width programmatically
<Progress Class="mb-3">
<ProgressBar @ref="progressBar" />
</Progress>

<div class="mb-3">
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="ResetProgressBar">Reset</Button>
</div>
@code {
ProgressBar progressBar;

private void IncreaseProgressBar()
{
progressBar.IncreaseWidth(10);
progressBar.SetLabel($"{progressBar.GetWidth()}%");
}

private void DecreaseProgressBar()
{
progressBar.DecreaseProgressBar(10);
progressBar.SetLabel($"{progressBar.GetWidth()}%");
}

private void ResetProgressBar()
{
progressBar.SetWidth(0);
progressBar.SetLabel($"{progressBar.GetWidth()}%");
}
}

See demo here.

Height

Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.

Blazor Progress - Height
<Progress Class="mb-3" Height="1">
<ProgressBar Width="20" />
</Progress>
<Progress Class="mb-3" Height="5">
<ProgressBar Width="20" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Width="40" />
</Progress>
<Progress Class="mb-3" Height="20">
<ProgressBar Width="40" />
</Progress>

See demo here.

Backgrounds

Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.

Blazor Progress - Backgrounds
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Secondary" Width="70" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Dark" Width="80" />
</Progress>

See demo here.

Set background programmatically

You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.

Blazor Progress - Set background programmatically
<Progress Class="mb-3">
<ProgressBar @ref="progressBar" Width="30" Label="30%" />
</Progress>

<div>
<Button Type="ButtonType.Button" Color="ButtonColor.Success" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Success)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Info" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Info)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Warning" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Warning)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Danger" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Danger)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Primary)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Secondary)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Dark" Size="Size.Small" @onclick="() => SetColor(ProgressColor.Dark)">Set Color</Button>
</div>
@code {
ProgressBar progressBar;
private void SetColor(ProgressColor color) => progressBar.SetColor(color);
}

See demo here.

Multiple bars

Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.

Blazor Progress - Multiple bars
<Progress Class="mb-3">
<ProgressBar Color="ProgressColor.Success" Width="20" />
<ProgressBar Color="ProgressColor.Info" Width="20" />
<ProgressBar Color="ProgressColor.Warning" Width="20" />
<ProgressBar Color="ProgressColor.Danger" Width="10" />
</Progress>

See demo here.

Striped

Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.

Blazor Progress - Striped
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Secondary" Width="80" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.Striped" Color="ProgressColor.Dark" Width="100" />
</Progress>

See demo here.

Animated stripes

The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.

Blazor Progress - Animated stripes
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Success" Width="10" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Info" Width="20" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Warning" Width="30" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Danger" Width="40" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Primary" Width="60" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Secondary" Width="80" />
</Progress>
<Progress Class="mb-3">
<ProgressBar Type="ProgressType.StripedAndAnimated" Color="ProgressColor.Dark" Width="100" />
</Progress>

See demo here.