MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

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.

See Progress API for parameter documentation.

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
<MudProgressLinear Color="Color.Secondary" Indeterminate="true" Class="my-7"/>

Linear determinate

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 🗙