BlazorExpress.Bulma | An enterprise-class component library built with the Blazor and Bulma CSS frameworks

The ProgressBar component is constructed using native HTML element.

How it works #

The ProgressBar component displays progress for a task using a horizontal bar, built on the native <progress> HTML element.

How to use:

Add the ProgressBar component to your page.
Set the Max property to define the total value representing 100% completion.
Set the Value property to indicate the current progress.

This demo shows a basic progress bar with a value and maximum, suitable for most progress-tracking scenarios.

15%

<ProgressBar Max="100" Value="15" />

Colors #

The ProgressBar supports multiple color options to visually indicate status or context, such as success, warning, or danger.

How to use:

Use the Color property to set the progress bar’s color.
Choose from predefined values like Primary, Link, Info, Success, Warning, or Danger.

This demo illustrates how to apply different colors to progress bars for various use cases.

15% 30% 45% 60% 75% 90%

<ProgressBar Color="ProgressBarColor.Link" Max="100" Value="15" />
<ProgressBar Color="ProgressBarColor.Primary" Max="100" Value="30" />
<ProgressBar Color="ProgressBarColor.Info" Max="100" Value="45" />
<ProgressBar Color="ProgressBarColor.Success" Max="100" Value="60" />
<ProgressBar Color="ProgressBarColor.Warning" Max="100" Value="75" />
<ProgressBar Color="ProgressBarColor.Danger" Max="100" Value="90" />

Sizes #

The ProgressBar component can be displayed in different sizes to fit your layout and design needs.

How to use:

Set the Size property to adjust the height of the progress bar.
Available sizes include Small, Normal, Medium, and Large.

This demo shows progress bars in all supported sizes for easy comparison.

15% 30% 45% 60%

<ProgressBar Size="ProgressBarSize.Small" Max="100" Value="15" />
<ProgressBar Size="ProgressBarSize.Normal" Max="100" Value="30" />
<ProgressBar Size="ProgressBarSize.Medium" Max="100" Value="45" />
<ProgressBar Size="ProgressBarSize.Large" Max="100" Value="60" />

Indeterminate #

The ProgressBar can be shown in an indeterminate state to indicate ongoing activity when the exact progress is unknown.

How to use:

Omit the Value property to display an indeterminate progress bar.
Set the Color property as needed to match your context.

This demo displays several indeterminate progress bars in different colors.

<ProgressBar Color="ProgressBarColor.Link" Max="100" />
<ProgressBar Color="ProgressBarColor.Primary" Max="100" />
<ProgressBar Color="ProgressBarColor.Info" Max="100" />
<ProgressBar Color="ProgressBarColor.Success" Max="100" />
<ProgressBar Color="ProgressBarColor.Warning" Max="100" />
<ProgressBar Color="ProgressBarColor.Danger" Max="100" />

Set width dynamically #

The ProgressBar value can be updated dynamically to reflect real-time progress changes.

How to use:

Bind the Value property to a variable in your component.
Update this variable in response to user actions or application events (e.g., button clicks).
Optionally, use the Max property to set the maximum value for the progress bar.

This demo demonstrates increasing, decreasing, and resetting the progress bar’s value interactively.

Example
View Source

<ProgressBar Color="ProgressBarColor.Link" Max="maxWidth" Value="width" />

<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
<Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="ResetProgressBar">Reset</Button>

@code {
    private float maxWidth = 100;
    private float width = 0;

    private void IncreaseProgressBar()
    {
        if (width == maxWidth)
            return;

        if ((width + 10) <= maxWidth)
            width += 10;
        else
            width = maxWidth;
    }

    private void DecreaseProgressBar()
    {
        if (width == 0)
            return;

        if ((width - 10) > 0)
            width -= 10;
        else
            width = 0;
    }

    private void ResetProgressBar()
    {
        width = 0;
    }
}

Set color dynamically #

The ProgressBar color can be changed at runtime to reflect different statuses or outcomes.

How to use:

Bind the Color property to a variable in your component.
Update this variable in response to user actions or application logic to change the progress bar’s color.

This demo shows how to switch the progress bar’s color interactively using buttons.

Example
View Source

30%

<ProgressBar Color="color" Max="100" Value="30" />

<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Link)">Set Color</Button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Primary)">Set Color</Button>
<Button Color="ButtonColor.Info" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Info)">Set Color</Button>
<Button Color="ButtonColor.Success" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Success)">Set Color</Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Warning)">Set Color</Button>
<Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="() => SetColor(ProgressBarColor.Danger)">Set Color</Button>

@code {
    private ProgressBarColor color;

    private void SetColor(ProgressBarColor progressBarColor)
    {
        color = progressBarColor;
    }
}

Dynamic progress #

The ProgressBar can be fully controlled in both value and color, allowing for advanced dynamic scenarios such as status feedback or multi-stage progress.

How to use:

Bind both the Value and Color properties to variables in your component.
Update these variables in your logic to reflect progress and status changes (e.g., success, warning, danger).
Use buttons or other UI elements to trigger updates to the progress bar’s value and color.

This demo provides a complete example of a progress bar that updates its value and color dynamically based on user interaction and progress state.

Example
View Source

10%

<ProgressBar Color="color" Max="maxWidth" Value="width" />

<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="IncreaseProgressBar">Increase by 10%</Button>
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="DecreaseProgressBar">Decrease by 10%</Button>
<Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="ResetProgressBar">Reset</Button>

@code {
    private float maxWidth = 100;
    private float width = 10;
    private ProgressBarColor color;

    private void UpdateColor()
    {
        if(width == 100)
        {
            color = ProgressBarColor.Success;
        }
        else if (width > 66 && width < 100)
        {
            color = ProgressBarColor.Link;
        }
        else if (width <= 66 && width > 33)
        {
            color = ProgressBarColor.Warning;
        }
        else if (width <= 33 && width > 0)
        {
            color = ProgressBarColor.None;
        }
        else if (width == 0)
        {
            color = ProgressBarColor.Danger;
        }
    }

    private void IncreaseProgressBar()
    {
        if (width == maxWidth)
            return;

        if ((width + 10) <= maxWidth)
            width += 10;
        else
            width = maxWidth;

        UpdateColor();
    }

    private void DecreaseProgressBar()
    {
        if (width == 0)
            return;

        if ((width - 10) > 0)
            width -= 10;
        else
            width = 0;

        UpdateColor();
    }

    private void ResetProgressBar()
    {
        width = 0;

        UpdateColor();
    }
}

DO YOU KNOW?

This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.

ProgressBar

The ProgressBar component is constructed using native HTML element.