Blazorise Progress component

Show users how much of an operation has completed.

Use the Progress component for uploads, form submissions, or other tasks where a visual indication of progress helps users understand what is happening.

Structure

A Progress can display a value directly or contain multiple ProgressBar components for stacked progress.

  • <Progress>Displays progress or groups multiple bars.
    • <ProgressBar>Displays one progress value within the group.

Examples

Progress components are built with two components.

  • We use the Progress as a wrapper to indicate the max value of the progress bar.
  • We use the inner ProgressBar to indicate the progress so far.

Single bar

Put that all together, and you have the following examples. 
<Progress Value="25" />

Multiple bars

Include multiple ProgressBar sub-components in a Progress component to build a horizontally stacked set of progress bars.
15
30
20
<Progress>
    <ProgressBar Value="15" />
    <ProgressBar Color="Color.Success" Value="30" />
    <ProgressBar Color="Color.Info" Value="20" />
</Progress>

TooltipAdded in v2.4

This example adds a tooltip to the success segment of a stacked progress bar. The Tooltip is placed inside ProgressBar because wrapping the bar would introduce an extra element that interferes with the progress layout. Setting the tooltip wrapper's width and height to 100% makes the entire segment respond to hover.
15
30
20
<Progress>
    <ProgressBar Value="15" />
    <ProgressBar Color="Color.Success" Value="30">
        <Tooltip Text="hello" Width="Width.Is100.OnWrapper" Height="Height.Is100.OnWrapper">
            30
        </Tooltip>
    </ProgressBar>
    <ProgressBar Color="Color.Info" Value="20" />
</Progress>

Custom colorsAdded in v2.3

Use custom CSS colors for a single bar or combine them with contextual colors in stacked bars.
20
25
20
<Progress Color="@(new Color("#DBB5E6"))" Value="65" Margin="Margin.Is3.FromBottom" />

<Progress>
    <ProgressBar Color="Color.Success" Value="20" />
    <ProgressBar Color="@(new Color("#DBB5E6"))" Value="25" />
    <ProgressBar Color="@(new Color(CssColor.Rgb(14, 165, 233)))" Value="20" />
</Progress>

Animated

Use an animated effect Progress Bar to show that progress is still ongoing. 
<Progress Value="75" Animated Striped />

Indeterminate

Add a Indeterminate to any Progress make the progres to the linear animation. Indeterminate Progress is best used to show that an operation is being executed. 
<Progress Indeterminate />

Max

You can specify the maximum value of the determinate Progress. This is useful for instances where you want to show capacity, or how much of a total has been uploaded/downloaded.
There have been 0 files downloaded 
@using System.Timers
@implements IDisposable

<Field>
    <FieldBody>
        <Progress Max="42" Value="@Value" />
    </FieldBody>
    <FieldHelp>
        There have been @Value files downloaded
    </FieldHelp>
</Field>

@code {
    private int Value = 0;
    private Timer timer;

    private const int IntervalDelay = 100; // milliseconds
    private const int IntervalIncrement = 1;

    protected override void OnInitialized()
    {
        timer = new Timer( IntervalDelay );
        timer.Elapsed += OnTimerElapsed;
        timer.AutoReset = true;
        timer.Start();
    }

    private void OnTimerElapsed( object sender, ElapsedEventArgs e )
    {
        Value = Value < 42 ? Value + IntervalIncrement : 0;
        InvokeAsync( StateHasChanged );
    }

    public void Dispose()
    {
        timer?.Stop();
        timer?.Dispose();
    }
}

Page progress

You can also show a small progress bar at the top of the page. Note that unlike regular Progress component, for PageProgress you must set the Visible parameter to make it active.

Basic

To show page progress just set the Value and Visible parameters. 
<PageProgress Visible Value="25" />

Indeterminate

To make an indeterminate progress bar, simply remove Value or make it a null. 
<PageProgress Visible />

Custom page progress colorsAdded in v2.3

Use custom CSS colors for determinate and indeterminate page progress. 
<PageProgress Color="@("#7C3AED")" Value="65" Visible Position="Position.Relative" Overflow="Overflow.Hidden" Margin="Margin.Is3.FromBottom" />
<PageProgress Color="@CssColor.Variable("--accent", "#0F766E")" Visible Position="Position.Relative" Overflow="Overflow.Hidden" />

Best Practices

Represent Progress Honestly

Use determinate progress only when the completed proportion is known; otherwise use the indeterminate state. Update a known value often enough to feel responsive without producing excessive rendering or network traffic.

Nearby Status

Accompany the visual bar with a concise label or status message, especially when work may pause or fail. Use <PageProgress> for page-level loading and place a regular <Progress> close to the specific task it represents.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page