Feedback

TwSkeleton

TwSkeleton is a Blazor loading placeholder. Choose a SkeletonType and Animation, set Width and Height, or generate one from ChildContent while Loading.

Last updated 24 September 2026

Basic Usage

With no ChildContent, TwSkeleton renders a single full-width text line placeholder by default.

Razor

<TwSkeleton Id="basic-skeleton" />

Shapes

Use SkeletonType for a circle or rectangle placeholder instead, and Width/Height to size it.

Razor

<div class="flex flex-wrap items-end gap-6">
    <TwSkeleton Id="text-skeleton" SkeletonType="SkeletonType.Text" Width="220px" />
    <TwSkeleton Id="circle-skeleton" SkeletonType="SkeletonType.Circle" Width="50px" Height="50px" />
    <TwSkeleton Id="rectangle-skeleton" SkeletonType="SkeletonType.Rectangle" Width="200px" Height="110px" />
</div>

Animation

Use Animation to switch between a soft opacity pulse (default), a shimmering wave sweep, or no animation at all.

Razor

<div class="flex flex-wrap items-end gap-6">
    <TwSkeleton Id="pulse-skeleton" SkeletonType="SkeletonType.Rectangle" Width="160px" Height="80px" Animation="SkeletonAnimation.Pulse" />
    <TwSkeleton Id="wave-skeleton" SkeletonType="SkeletonType.Rectangle" Width="160px" Height="80px" Animation="SkeletonAnimation.Wave" />
    <TwSkeleton Id="none-skeleton" SkeletonType="SkeletonType.Rectangle" Width="160px" Height="80px" Animation="SkeletonAnimation.None" />
</div>

Auto-Generated from Content

Wrap real markup in ChildContent and toggle Loading - while loading, TwSkeleton measures the actual rendered layout of that content (via a ResizeObserver) and generates matching placeholder blocks automatically, instead of a single generic box.

Jane Doe

Product Designer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Razor

<TwButton Class="mb-4" Color="Color.Primary" OnClick="ToggleLoading">
    @(loading ? "Finish loading" : "Reset")
</TwButton>

<TwSkeleton Id="profile-skeleton" Loading="loading">
    <TwCard>
        <div class="flex items-center gap-4">
            <div class="flex items-center justify-center rounded-full size-12 bg-purple-600 text-white text-sm font-semibold" aria-hidden="true">JD</div>
            <div>
                <p class="font-semibold">Jane Doe</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Product Designer</p>
            </div>
        </div>
        <p class="mt-4 text-sm">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </TwCard>
</TwSkeleton>

CSHARP

@code {
    private bool loading = true;
    
    private void ToggleLoading() => loading = !loading;
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwSkeletonTheme), 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
`Text`	string
`Circle`	string
`Rectangle`	string
`MeasuringWrapper`	string
`Pulse`	string
`Wave`	string

Full reference: TwSkeletonTheme on the API docs.