Blazor Progress

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

How it works #

20%
Razor 
<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>

Labels #

Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
20%
Razor 
<Progress Class="mb-3">
 <ProgressBar Width="20" Label="20%" />
</Progress>

Set width programmatically #

Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
Razor 
<Progress Class="mb-3">
 <ProgressBar @ref="progressBar" />
</Progress>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ResetProgressBar">Reset</Button>

@code {
 ProgressBar progressBar = default!;

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

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

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

Height #

Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
Razor 
<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>

Backgrounds #

Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
Razor 
<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>

Set background programmatically #

You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
30%
Razor 
<Progress Class="mb-3">
 <ProgressBar @ref="progressBar" Width="30" Label="30%" />
</Progress>


<Button Type="ButtonType.Button" Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Success)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Info)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Warning)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Danger)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Primary)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Secondary)">Set Color</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Dark" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressColor.Dark)">Set Color</Button>

@code {
 ProgressBar progressBar = default!;
 private void SetColor(ProgressColor color) => progressBar.SetColor(color);
}

Multiple bars #

Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
Razor 
<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>

Striped #

Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
Razor 
<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>

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

Dynamic progress #

10%
Razor 
@using System.Globalization;
<Progress Class="mb-3">
 <ProgressBar Width="@width" Label="@label" Type="progressType" Color="progressColor" />
</Progress>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="ResetProgressBar">Reset</Button>

@code {
 private double width = 10;
 private string label = "10%";
 private ProgressType progressType = ProgressType.StripedAndAnimated;
 private ProgressColor progressColor = ProgressColor.Secondary;

 private void IncreaseProgressBar()
 {
 if ((width + 10) > 100)
 return;

 width += 10;
 UpdateProgress(width);
 }

 private void DecreaseProgressBar()
 {
 if ((width - 10) < 0)
 return;

 width -= 10;
 UpdateProgress(width);
 }

 private void ResetProgressBar()
 {
 width = 0;
 UpdateProgress(width);
 }

 private void UpdateProgress(double w)
 {
 if(w == 100)
 {
 width = w;
 label = $"{width.ToString(CultureInfo.InvariantCulture)}%";
 progressType = ProgressType.Striped;
 progressColor = ProgressColor.Success;
 }
 else if (w > 66 && w < 100)
 {
 width = w;
 label = $"{width.ToString(CultureInfo.InvariantCulture)}%";
 progressType = ProgressType.StripedAndAnimated;
 progressColor = ProgressColor.Success;
 }
 else if (w <= 66 && w > 33)
 {
 width = w;
 label = $"{width.ToString(CultureInfo.InvariantCulture)}%";
 progressType = ProgressType.StripedAndAnimated;
 progressColor = ProgressColor.Warning;
 }
 else if (w <= 33 && w > 0)
 {
 width = w;
 label = $"{width.ToString(CultureInfo.InvariantCulture)}%";
 progressType = ProgressType.StripedAndAnimated;
 progressColor = ProgressColor.Secondary;
 }
 else if(w == 0)
 {
 width = w;
 label = $"{width.ToString(CultureInfo.InvariantCulture)}%";
 progressType = ProgressType.Striped;
 progressColor = ProgressColor.Danger;
 }
 }
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.5.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Blazor Express

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.