Progress

A progress bar, determinate or not.

JavaScript off: what the HTML and CSS do on their own.

A progress bar. With a Value it shows how far along something is; without one it's indeterminate (a bar that moves, for "working on it"). Rendered on the server, so it works on static pages; on interactive pages, update Value from C#.

Usage

razor

<Progress Value="40" Label="Uploading" ShowValue />
<Progress Value="3" Max="5" ValueText="3 of 5 files" Accent="Accent.From(Color.Success)" />
<Progress Label="Preparing export" />                       (indeterminate)

Value and label

Use Value and Max for how far along it is, Label to name it, and ShowValue or ValueText to show the amount.

Preview Code

Preview

Uploading report.pdf

Importing

Code

Values.razor

<Stack Gap="5" Grow MaxWidth="28.Rem">
    <Progress Value="40" Label="Uploading report.pdf" ShowValue />
    <Progress Value="3" Max="5" Label="Importing" ValueText="3 of 5 files" />
</Stack>

Sizes and colors

Use Size for the bar's thickness and Accent for its color.

Preview Code

Preview

Storage

Goal

Onboarding

Code

Sizes.razor

<Stack Gap="5" Grow MaxWidth="28.Rem">
    <Progress Value="82" Size="ControlSize.Sm" Accent="Accent.From(Color.Warning)" Label="Storage" ValueText="8.2 of 10 GB" />
    <Progress Value="64" Accent="Accent.From(Color.Success)" Label="Goal" ValueText="$6,400 of $10,000" />
    <Progress Value="25" Size="ControlSize.Lg" Label="Onboarding" ShowValue />
</Stack>

Indeterminate

Leave out Value for a bar that sweeps while the work has no known length.

Preview Code

Preview

Preparing export

Code

Indeterminate.razor

<Stack Gap="5" Grow MaxWidth="28.Rem">
    <Progress Label="Preparing export" />
    <Progress Size="ControlSize.Sm" aria-label="Loading orders" />
</Stack>

Updating from C#

Change Value from C# on an interactive page and the bar follows.

Always Live

Preview Code

Preview

This example runs C# over a Blazor Server connection, which an Off page doesn't have. Show this page Live

Code

FromCode.razor

<Stack Gap="4" Grow MaxWidth="28.Rem">
    <Progress Value="_done" Max="Files" Label="Uploading" ValueText="@($"{_done} of {Files} files")" />
    <Row>
        <Button OnClick="UploadAsync" Loading="_uploading" StartIcon="Lucide.Upload">Upload</Button>
    </Row>
</Stack>

@code {
    private const int Files = 8;
    private int _done;
    private bool _uploading;

    private async Task UploadAsync()
    {
        _uploading = true;
        for (_done = 0; _done < Files; _done++)
        {
            StateHasChanged();
            await Task.Delay(400);
        }

        _uploading = false;
    }
}

Mode support

What works in each mode, Progress
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax; screen readers hear ValueText or the percentage.
Label is the bar's accessible name (through aria-labelledby); without one, an aria-label on the component names the bar.
Without a Value it has no value attributes, which marks it as indeterminate.
With reduced motion, the indeterminate bar moves more slowly.

Parameters

Progress parameters
Prop	Type	Default
`Value`How far along, from 0 to Max.	`double?`
`Max`The value that means done.	`double`	`100`
`Label`A label above the bar, also its accessible name.	`string?`
`ShowValue`Shows the percentage above the bar, at the end.	`bool`	`false`
`ValueText`Text for the value in place of a percentage, such as "3 of 5 files".	`string?`
`Accent`The bar's color, such as Accent.Danger, Accent.From(Color.Success) or Accent.Of("#0d9488").	`Accent?`	`computed`
`Size`Thickness.	`ControlSize`	`ControlSize.Md`

Plus 16 item props and 4 common props.

Full API