Feedback

TwSpinner

TwSpinner is a Blazor loading spinner component. Set Size, Color, Label and ShowLabel, or use it inside a button.

Last updated 24 September 2026

Basic Usage

An animated loading indicator rendered as an <output> element, so status changes are announced to assistive technology. The Label ("Loading..." by default) is always in the DOM for assistive technology, even when not shown visually.

Razor

<TwSpinner AriaLabel="Loading" />

Sizes

Use Size to control the spinner's dimensions.

Razor

<div class="flex items-center gap-6">
    <TwSpinner Size="SpinnerSize.Small" AriaLabel="Loading, small" />
    <TwSpinner Size="SpinnerSize.Medium" AriaLabel="Loading, medium" />
    <TwSpinner Size="SpinnerSize.Large" AriaLabel="Loading, large" />
</div>

Colors

Use Color to match the spinner to its surrounding context.

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="p-3 inline-flex">
            <TwSpinner AriaLabel="@c.ToString()" Color="@c" />
        </div>
    }
    else
    {
        <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg inline-flex" : "bg-white p-3 rounded-lg inline-flex")">
            <TwSpinner AriaLabel="@c.ToString()" Color="@c" />
        </div>
    }
}

Visible Label

By default the label text is only announced to assistive technology. Set ShowLabel to display it next to the spinner too.

Loading... Uploading files...

Razor

<div class="flex flex-col gap-4">
    <TwSpinner Label="Loading..." ShowLabel Color="Color.Primary" />
    <TwSpinner Label="Uploading files..." ShowLabel Size="SpinnerSize.Small" Color="Color.Success" />
</div>

Inside a Button

A common pattern: swap a button's label for a small spinner while an async action is in flight.

Razor

<TwButton Color="Color.Primary" Variant="ButtonVariant.Outlined" Disabled="@isSaving" OnClick="Save">
    @if (isSaving)
    {
        <TwSpinner Size="SpinnerSize.Small" AriaLabel="Saving" />
    }
    else
    {
        @: Save changes
    }
</TwButton>

CSHARP

@code {
    private bool isSaving;
    
    private async Task Save()
    {
        isSaving = true;
        await Task.Delay(1500);
        isSaving = false;
    }
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwSpinnerTheme), 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
`Wrapper`	string
`Base`	string
`Track`	string
`LightTrack`	string
`DarkTrack`	string
`Small`	string
`Medium`	string
`Large`	string
`Label`	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: TwSpinnerTheme on the API docs.