Feedback

TwProgress

TwProgress is a Blazor progress bar component. Set Value, Max, Color and Size, or use Indeterminate mode when the duration is unknown.

Last updated 24 September 2026

Basic Usage

A styled wrapper around the native <progress> element - it keeps the built-in progressbar role and automatic aria-valuenow/aria-valuemin/aria-valuemax semantics for free.

Download Progress 40%

Razor

<TwProgress T="int" Id="download-progress" Label="Download Progress" Value="40" Max="100" />

Colors

Use Color to give a progress bar meaning at a glance - here it signals status rather than just decoration.

Primary 50%

Accent 50%

Success 50%

Danger 50%

Warning 50%

Info 50%

Light 50%

Dark 50%

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="block mt-4">
            <div class="p-3">
                <TwProgress T="int" Id="@($"{c.ToString()}-progress")" Label="@c.ToString()" Value="50" Max="100" Color="c" />
            </div>
        </div>
    }
    else
    {
        <div class="block mt-4">
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwProgress T="int" Id="@($"{c.ToString()}-progress")" Label="@c.ToString()" Value="50" Max="100" LabelClass="@(c == Color.Light ? "mt-2 text-white dark:text-white" : "mt-2 text-gray-900 dark:text-gray-900")" Color="c" />
            </div>
        </div>
    }
}

Sizes

Use Size to control the bar's thickness.

Small 30%

Medium 55%

Large 80%

Razor

<div class="space-y-6">
    <TwProgress T="int" Id="small-progress" Label="Small" Value="30" Max="100" Size="ProgressSize.Small" Color="Color.Warning" />
    <TwProgress T="int" Id="medium-progress" Label="Medium" Value="55" Max="100" Size="ProgressSize.Medium" Color="Color.Warning" />
    <TwProgress T="int" Id="large-progress" Label="Large" Value="80" Max="100" Size="ProgressSize.Large" Color="Color.Warning" />
</div>

Indeterminate

Set Indeterminate when the completion amount isn't known yet - the value attribute is omitted so it renders (and is announced) as busy rather than "0% done".

Syncing... Loading...

Razor

<TwProgress T="int" Id="sync-progress" Label="Syncing..." Max="100" Indeterminate />

Interactive

Drive Value from your own component state - there's no built-in user interaction, so the bar only moves when your code updates it.

Upload Progress 20%

20% complete

Razor

<TwProgress T="int" Id="interactive-progress" Label="Upload Progress" Value="uploadValue" Max="100" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@uploadValue% complete</p>
<TwButton Class="mt-3" Color="Color.Primary" Disabled="@(uploadValue >= 100)" OnClick="Advance">
    Upload next chunk
</TwButton>

CSHARP

@code {
    private int uploadValue = 20;
    
    private void Advance() => uploadValue = Math.Min(100, uploadValue + 20);
}

Disabled

Use Disabled to dim a progress bar that's paused or inactive.

Paused 45%

Razor

<TwProgress T="int" Id="disabled-progress" Label="Paused" Value="45" Max="100" Disabled />

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwProgressTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`Small`	string
`Medium`	string
`Large`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwProgressTheme on the API docs.