MudBlazor

Progress

Progress indicators that either show the length of a process or unspecified wait time, also known as indeterminate state. The animation is done with SVGs and CSS.

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app's state and indicate available actions, such as whether users can navigate away from the current screen.

Determinate indicators

Determinate indicators display how long a process will take. They should be used when the process completion rate can be estimated.

Indeterminate indicators

Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn't estimable, or when it's not necessary to indicate how long an activity will take.

Circular

Circular indeterminate
<MudProgressCircular Color="Color.Default" Indeterminate="true" />
<MudProgressCircular Color="Color.Primary" Indeterminate="true"/>
<MudProgressCircular Color="Color.Secondary" Indeterminate="true" />
<MudProgressCircular Color="Color.Success" Indeterminate="true" />
<MudProgressCircular Color="Color.Info" Indeterminate="true" />
Circular determinate
@using System;
@using System.Threading;

@implements IDisposable;

<MudProgressCircular Color="Color.Default" Value="@Value" />
<MudProgressCircular Color="Color.Primary" Value="@Value" />
<MudProgressCircular Color="Color.Secondary" Value="@Value" />
<MudProgressCircular Color="Color.Success" Value="@Value" />
<MudProgressCircular Color="Color.Info" Value="@Value" />
@code {
    public int Value { get; set; }

    public async void StartTimerAsync()
    {
        if (disposed)
            return;
        Value = 0;
        while (Value < 100)
        {
            Value = Value + 4;
            StateHasChanged();
            await Task.Delay(500);
            if (disposed)
                return;
        }
        Value = 0;
        StartTimerAsync();
    }
    protected override void OnInitialized()
        => StartTimerAsync();

    bool disposed;
    public void Dispose()
    {
        disposed = true;
    }

}
Circular Sizes

You can change the size with the pre-defined Size prop or change the Width and Height in css.

<MudProgressCircular Color="Color.Primary" Size="Size.Small" Indeterminate="true"/>
<MudProgressCircular Color="Color.Primary" Size="Size.Medium" Indeterminate="true" />
<MudProgressCircular Color="Color.Primary" Size="Size.Large" Indeterminate="true" />
<MudProgressCircular Color="Color.Primary" Style="height:70px;width:70px;" Indeterminate="true" />

Linear

Linear indeterminate
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
<MudProgressLinear Color="Color.Secondary" Indeterminate="true" Class="my-7"/>
Linear determinate
<MudProgressLinear Color="Color.Primary" Value="@Value" Class="my-7" />
<MudProgressLinear Color="Color.Secondary" Value="@Value" Class="my-7" />
@code { public int Value { get; set; }

    public async void StartTimerAsync()
    {
        if (disposed)
            return;
        Value = 100;
        while (Value > 0)
        {
            Value = Value - 4;
            StateHasChanged();
            await Task.Delay(500);
            if (disposed)
                return;
        }
        Value = 100;
        StartTimerAsync();
    }
    protected override void OnInitialized()
        => StartTimerAsync();

    bool disposed;
    public void Dispose()
    {
        disposed = true;
    } }
Min and Max

By default, the value range is between 0 and 100. If you have a custom range, set Min and Max accordingly.

<MudProgressLinear Color="Color.Success" Value="-2" Min="-7" Max="7" />
<MudProgressLinear Color="Color.Info" Value="17.75" Min="17.0" Max="18.0" Class="my-7" />
<MudProgressLinear Color="Color.Error" Value="100" Min="0" Max="100" />
Linear buffer
<MudProgressLinear Color="Color.Primary" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />
<MudProgressLinear Color="Color.Secondary" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />
@code {
    public int Value { get; set; }
    public int BufferValue { get; set; }

    public async void StartTimerAsync()
    {
        if (disposed)
            return;
        Value = 100;
        BufferValue = 100;
        while (Value > 0)
        {
            Value = Value - 4;
            BufferValue = BufferValue - 5;
            StateHasChanged();
            await Task.Delay(500);
            if (disposed)
                return;
        }
        Value = 100;
        BufferValue = 100;
        StartTimerAsync();
    }
    protected override void OnInitialized()
        => StartTimerAsync();

    bool disposed;
    public void Dispose()
    {
        disposed = true;
    }

}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙