ComponentsFeedback and overlays
Progress
Progress indicators show that work is happening: determinate when you know how much is done, indeterminate when you do not. Circular suits buttons and small areas; linear suits pages, cards and uploads.
Circular: determinate, indeterminate and labelled
Set Value (0 to 100 by default) for determinate progress, or Indeterminate when the amount is unknown. ChildContent puts a label in the middle.
72%
18/24
Circular: every size and color
All combinations of Size and Color at 70 percent. StrokeWidth and Rounded adjust the ring.
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
Linear: buffer, striped, rounded, ranges and labels
Buffer shows a second, lighter value, as a video player does. Min and Max change the scale; ChildContent writes a label on a large bar.
An upload with progress and cancel
Determinate progress for a simulated upload, announced once at start and once at the end rather than at every step.
observatory-log-2026.csv
0 of 48 MBPlayground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudProgressLinear Value="45" Color="Color.Primary" Rounded="true" />