Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Progress

Progress indicators that either shows the length of a process or unspecified wait time also known as indeterminate. The animations is done with SVG's 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 detected.

Indeterminate indicators

Indeterminate indicators express an unspecified amount of wait time. They should be used when progress isn’t detectable, or if 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
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
Copy Code
View the source on GitHub
<MudProgressLinear Color="Color.Primary" Indeterminate="true"/>
<MudProgressLinear Color="Color.Secondary" Indeterminate="true"/>

Linear determinate

Show code example
Copy Code
View the source on GitHub
<MudProgressLinear Color="Color.Primary" Value="@Value" />
<MudProgressLinear Color="Color.Secondary" Value="@Value" />
@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;
    }

}

Linear buffer

Hide code example
Copy Code
View the source on GitHub
<MudProgressLinear Color="Color.Primary" Buffer="true" Value="@Value" BufferValue="@BufferValue" />
<MudProgressLinear Color="Color.Secondary" Buffer="true" Value="@Value" BufferValue="@BufferValue" />
@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 🗙