Progress Bar

The Progress Bar component is constructed using native HTML element.

API Documentation

Example #

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

Colors #

15% 30% 45% 60% 75% 90%
RAZOR
<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 #

15% 30% 45% 60%
RAZOR
<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 #

RAZOR
<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 #

0% 
<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 #

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 float width = 10;

    private void SetColor(ProgressBarColor progressBarColor)
    {
        color = progressBarColor;
    }
}

Dynamic progress #

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();
    }
}
If you like BlazorExpress.Bulma, give it a star on GitHub!