Skeleton

A Skeleton component is a loading state that acts as a placeholder for content within an interface.

API Documentation
It is used to indicate that the content is being loaded and to provide a visual representation of the content that will be displayed.
The Skeleton component can be used to create a loading state for any type of content, such as text, images, or other components.

How it works #

The Skeleton component provides a placeholder UI while content is loading, improving perceived performance and user experience.

How to use:
  1. Add the Skeleton component where you want to display a loading placeholder.
  2. Use it as a self-closing tag for a generic block, or wrap your content inside <Skeleton>...</Skeleton> to show a skeleton overlay until the content is ready.
  3. Replace the skeleton with your actual content once loading is complete.
The demo below shows a basic skeleton block and a skeleton overlaying text content.
RAZOR
<Skeleton />
The Skeleton component can wrap any content, such as text or paragraphs, to indicate that the content is loading.

How to use:
  1. Wrap your content inside the Skeleton component.
  2. While loading, the skeleton will be shown in place of the content.
  3. Once loading is complete, display the actual content.
This demo illustrates a skeleton overlaying a block of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
RAZOR
<Skeleton>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Skeleton>

Skeleton lines #

The Skeleton component supports a "lines" type for simulating loading text or lists using multiple horizontal lines.

How to use:
  1. Set Type="SkeletonType.Lines" on the Skeleton component.
  2. Add one or more SkeletonLine elements as children to represent each line.
  3. Customize each line as needed (e.g., width, color).
The demo below shows the default usage with several skeleton lines. 
<Skeleton Type="SkeletonType.Lines">
    <SkeletonLine />
    <SkeletonLine />
    <SkeletonLine />
    <SkeletonLine />
    <SkeletonLine />
</Skeleton>

Width #

You can customize the width of each skeleton line to better match the expected content layout.

How to use:
  1. Within a Skeleton of type Lines, set the Width parameter on each SkeletonLine (value is a percentage).
  2. Use different widths for a more realistic loading effect.
The demo below shows skeleton lines with varying widths. 
<Skeleton Type="SkeletonType.Lines">
    <SkeletonLine Width="60" />
    <SkeletonLine Width="75" />
    <SkeletonLine Width="25" />
</Skeleton>

Colors #

The Skeleton component supports color customization to match your application's theme.

How to use:
  1. Set the Color parameter on the Skeleton component to apply a color to the entire skeleton block.
  2. Choose from predefined color options such as Primary, Link, Success, etc.
The demo below shows a skeleton block with a primary color. 
<Skeleton Color="SkeletonColor.Primary" />
You can also set different colors for individual skeleton lines for more granular control.

How to use:
  1. Within a Skeleton of type Lines, set the Color parameter on each SkeletonLine to customize its color.
  2. Mix and match colors to simulate various content types or highlight specific areas.
The demo below shows skeleton lines with different colors. 
<Skeleton Type="SkeletonType.Lines">
    <SkeletonLine Color="SkeletonColor.Primary" />
    <SkeletonLine Color="SkeletonColor.Link" />
    <SkeletonLine Color="SkeletonColor.Success" />
    <SkeletonLine Color="SkeletonColor.Danger" />
    <SkeletonLine Color="SkeletonColor.Warning" />
    <SkeletonLine Color="SkeletonColor.Info" />
    <SkeletonLine Color="SkeletonColor.White" />
    <SkeletonLine Color="SkeletonColor.Light" />
    <SkeletonLine Color="SkeletonColor.Dark" />
    <SkeletonLine Color="SkeletonColor.Black" />
</Skeleton>

Button #

The Skeleton feature can be applied to interactive components like buttons to indicate loading states.

How to use:
  1. Set the IsSkeleton parameter to true on the Button component to display its skeleton state.
  2. Toggle the IsSkeleton property in your code to control when the skeleton is shown (e.g., during async operations).
  3. Use this approach for any button style or color.
The demo below shows multiple buttons with skeleton states and a toggle to simulate loading. 
<Buttons>
    <Button IsSkeleton="isSkeleton">Button</Button>
    <Button Color="ButtonColor.Link" IsSkeleton="isSkeleton">Link</Button>
    <Button Color="ButtonColor.Primary" IsSkeleton="isSkeleton">Primary</Button>
    <Button Color="ButtonColor.Success" IsSkeleton="isSkeleton">Success</Button>
    <Button Color="ButtonColor.Info" IsSkeleton="isSkeleton">Info</Button>
    <Button Color="ButtonColor.Warning" IsSkeleton="isSkeleton">Warning</Button>
    <Button Color="ButtonColor.Danger" IsSkeleton="isSkeleton">Danger</Button>
</Buttons>

<Button Color="ButtonColor.Dark" Size="ButtonSize.Small" @onclick="ToggleSkeletonAsync">Toggle Skeleton</Button>

@code{
    bool isSkeleton = false;

    async Task ToggleSkeletonAsync()
    {
        isSkeleton = true;
        await Task.Delay(3000);
        isSkeleton = false;
    }
}

Icon #

The Skeleton feature can be applied to icon components to indicate that an icon is loading or unavailable, providing a visual placeholder that matches the expected icon's size and shape.

How to use:
  1. Add your icon component (e.g., BootstrapIcon) to the page.
  2. Set the IsSkeleton parameter to true on the BootstrapIcon component or GoogleFontIconto display its skeleton state.
  3. Toggle the IsSkeleton property in your code to control when the skeleton is shown (for example, during asynchronous loading operations).
  4. Once loading is complete, set IsSkeleton to false to display the actual icon.
This demo shows how to use skeleton placeholders for icons and how to toggle their loading state programmatically.


home thumb_up 
<BootstrapIcon Name="BootstrapIconName.ReplyAllFill" IsSkeleton="isSkeleton" />
<BootstrapIcon Name="BootstrapIconName.ReplyFill" IsSkeleton="isSkeleton" />
<br /><br />
<GoogleFontIcon Name="GoogleFontIconName.Home" IsSkeleton="isSkeleton" />
<GoogleFontIcon Name="GoogleFontIconName.ThumbUp" IsSkeleton="isSkeleton" />

<div class="mt-5">
    <Button Color="ButtonColor.Dark" Size="ButtonSize.Small" @onclick="ToggleSkeletonAsync">Toggle Skeleton</Button>
</div>

@code {
    bool isSkeleton = false;

    async Task ToggleSkeletonAsync()
    {
        isSkeleton = true;
        await Task.Delay(3000);
        isSkeleton = false;
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!