Progress Bar Component

Bar only

<ProgressBar Value="0" />
<ProgressBar Value="25" />
<ProgressBar Value="50" />
<ProgressBar Value="75" />
<ProgressBar Value="100" />

With label (right)

25%

50%

75%

100%

<ProgressBar Value="25" ShowLabel="true" />
<ProgressBar Value="50" ShowLabel="true" />
<ProgressBar Value="75" ShowLabel="true" />

With floating tooltip

<ProgressBar Value="25" LabelPosition="tooltip" />
<ProgressBar Value="50" LabelPosition="tooltip" />
<ProgressBar Value="75" LabelPosition="tooltip" />

Sizes

60%

<ProgressBar Value="60" Size="sm" ShowLabel="true" />
<ProgressBar Value="60" Size="md" ShowLabel="true" />

Progress summary (info card)

82 %

Reconciliation Progress

9 of 11 medications decided · 2 pending

64 %

Onboarding Setup

7 of 11 steps complete

100 %

Backup Complete

All 248 files synced

<ProgressSummary Value="82" Color="warning" Title="Reconciliation Progress">
    <Description>9 of 11 medications decided &middot; 2 pending</Description>
</ProgressSummary>

<ProgressSummary Value="64" Color="brand" Title="Onboarding Setup">
    <Description>7 of 11 steps complete</Description>
</ProgressSummary>

<ProgressSummary Value="100" Color="success" Title="Backup Complete">
    <Description>All 248 files synced</Description>
</ProgressSummary>

Summary colours

40 %

Storage Almost Full

184 GB of 200 GB used

76 %

Profile Strength

Add a photo to reach 100%

<ProgressSummary Value="40" Color="error" Title="Storage Almost Full">
    <Description>184 GB of 200 GB used</Description>
</ProgressSummary>

<ProgressSummary Value="76" Color="gray" Title="Profile Strength">
    <Description>Add a photo to reach 100%</Description>
</ProgressSummary>

Interactive

40%

<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);
}