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.

API
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 Progress
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" />
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 SimulateProgress()
	{
		Value = 0;
		do
		{
			if (_disposed)
			{
				return;
			}

			Value += 4;
			StateHasChanged();
			await Task.Delay(500);

		} while (Value < 100);

		SimulateProgress();
	}

	protected override void OnInitialized() => SimulateProgress();

	bool _disposed;
	public void Dispose() => _disposed = true;

}
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 Progress
Indeterminate

<MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="my-7" />
<MudProgressLinear Color="Color.Secondary" Indeterminate="true" Class="my-7"/>
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 SimulateProgress()
	{
		Value = 0;
		do
		{
			if (_disposed)
			{
				return;
			}

			Value += 4;
			StateHasChanged();
			await Task.Delay(500);

		} while (Value < 100);

		SimulateProgress();
	}

	protected override void OnInitialized() => SimulateProgress();

	bool _disposed;
	public void Dispose() => _disposed = true;
}
Sizes

<MudProgressLinear Color="Color.Dark" Size="Size.Small" Value="25" />
<MudProgressLinear Color="Color.Info" Size="Size.Medium" Value="50" Class="my-7" />
<MudProgressLinear Color="Color.Tertiary" Size="Size.Large" Value="75" />
Min Max

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

<MudProgressLinear Value="-2" Min="-7" Max="7" />
<MudProgressLinear Value="17.75" Min="17.0" Max="18.0" Class="my-7" />
<MudProgressLinear Value="100" Min="0" Max="100" />
Buffer

When setting Buffer to true you also have to give it a BufferValue. You can use any combination of buffer-value and value to achieve your design. 

<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" />
<MudProgressLinear Color="Color.Tertiary" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />
<MudProgressLinear Color="Color.Info" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />
<MudProgressLinear Color="Color.Warning" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />
<MudProgressLinear Color="Color.Error" Buffer="true" Value="@Value" BufferValue="@BufferValue" Class="my-7" />

@code {
	public int Value { get; set; }
	public int BufferValue { get; set; }

	public async void SimulateProgress()
	{
		Value = 5;
		BufferValue = 10;

		do
		{
			if (_disposed)
			{
				return;
			}

			Value += 4;
			BufferValue += 5;
			StateHasChanged();
			await Task.Delay(500);

		} while (Value < 100);

		SimulateProgress();
	}

	protected override void OnInitialized() => SimulateProgress();

	private bool _disposed;

	public void Dispose() => _disposed = true;
}
Rounded

Sets the border radius on the progress linear to the set theme value.

<MudProgressLinear Color="Color.Error" Rounded="true" Size="Size.Small" Value="25" />
<MudProgressLinear Color="Color.Warning" Rounded="true" Size="Size.Medium" Value="50" Class="my-7" />
<MudProgressLinear Color="Color.Success" Rounded="true" Size="Size.Large" Value="75" />
Striped

Applies a striped background over the progress bar.

<MudProgressLinear Color="Color.Secondary" Striped="true" Size="Size.Medium" Value="50" Class="my-7" />
<MudProgressLinear Color="Color.Primary" Striped="true" Size="Size.Large" Value="75" Class="my-7" />
Labels

While using the ChildContent of the component you can add a text to display current value.

25%
<MudProgressLinear Color="Color.Info" Size="Size.Large" Value="25" Class="my-7">
    <MudText Typo="Typo.subtitle1" Color="Color.Dark">
        <b>25%</b>
    </MudText>
</MudProgressLinear>
Vertical

Vertical progress bars works exactly the same way as the default horizontal ones.

25
<MudPaper Height="360px" Class="d-flex justify-space-around mud-width-full" Elevation="0">
    <MudProgressLinear Vertical="true" Color="Color.Primary" Size="Size.Small" Indeterminate="true" />
    <MudProgressLinear Vertical="true" Color="Color.Primary" Size="Size.Medium" Value="@Value" />
    <MudProgressLinear Vertical="true" Color="Color.Primary" Size="Size.Medium" Value="25">
        <MudText Typo="Typo.subtitle1" Color="Color.Dark"><b>25</b></MudText>
    </MudProgressLinear>
    <MudProgressLinear Vertical="true" Color="Color.Primary" Size="Size.Small" Buffer="true" Value="@Value" BufferValue="@BufferValue" />
    <MudProgressLinear Vertical="true" Color="Color.Primary" Striped="true" Size="Size.Large" Value="@Value" />
</MudPaper>

@code {
    public int Value { get; set; }
    public int BufferValue { get; set; }

  public async void SimulateProgress()
	{
		Value = 5;
		BufferValue = 10;

		do
		{
			if (_disposed)
			{
				return;
			}

			Value += 4;
			BufferValue += 5;
			StateHasChanged();
			await Task.Delay(500);

		} while (Value < 100);

		SimulateProgress();
	}

    protected override void OnInitialized() => SimulateProgress();

    bool _disposed;
    public void Dispose() => _disposed = true;
}
Popover
Rating
An unhandled error has occurred. Reload 🗙