Progress Bar Component
Bar only
Values from 0 to 100
razor
<ProgressBar Value="0" />
<ProgressBar Value="25" />
<ProgressBar Value="50" />
<ProgressBar Value="75" />
<ProgressBar Value="100" />With label (right)
Percentage label beside the bar
25%
50%
75%
100%
razor
<ProgressBar Value="25" ShowLabel="true" />
<ProgressBar Value="50" ShowLabel="true" />
<ProgressBar Value="75" ShowLabel="true" />With floating tooltip
Percentage shown above the thumb
25%
50%
75%
razor
<ProgressBar Value="25" LabelPosition="tooltip" />
<ProgressBar Value="50" LabelPosition="tooltip" />
<ProgressBar Value="75" LabelPosition="tooltip" />Sizes
sm (6px track) and md (8px track)
60%
60%
razor
<ProgressBar Value="60" Size="sm" ShowLabel="true" />
<ProgressBar Value="60" Size="md" ShowLabel="true" />Interactive
Wire Value to state and call StateHasChanged()
40%
40%
razor
<Button Variant="secondary" Size="sm" Text="-10" OnClick="Decrease" />
<Button Variant="secondary" Size="sm" Text="+10" OnClick="Increase" />
<ProgressBar Value="@progress" ShowLabel="true" />
<ProgressBar Value="@progress" LabelPosition="tooltip" />
@code {
private int progress = 40;
private void Increase() => progress = Math.Min(100, progress + 10);
private void Decrease() => progress = Math.Max(0, progress - 10);
}