Blazorise Skeleton component

Show a preview of the page layout while its content is loading.

Use skeleton placeholders when content takes time to load and users benefit from seeing where it will appear.

Structure

A Skeleton groups SkeletonItem placeholders that define the shapes and sizes of the loading content.

  • <Skeleton>Contains the placeholder layout.
    • <SkeletonItem>Defines one placeholder's shape and size.

Examples

Basic

The most basic skeleton example. 
<Skeleton>
    <SkeletonItem ColumnSize="ColumnSize.Is6" />
</Skeleton>

Pulse Animation

A skeleton with a pulse animation to better convey the perception of something being actively loaded. 
<Skeleton Animation="SkeletonAnimation.Pulse">
    <SkeletonItem ColumnSize="ColumnSize.Is7" />
    <SkeletonItem ColumnSize="ColumnSize.Is4" />
    <SkeletonItem ColumnSize="ColumnSize.Is4" />
    <SkeletonItem ColumnSize="ColumnSize.Is6" />
    <SkeletonItem ColumnSize="ColumnSize.Is8" />
</Skeleton>

Wave Animation

A skeleton with a wave animation to better convey the perception of something being actively loaded. 
<Skeleton Animation="SkeletonAnimation.Wave">
    <SkeletonItem ColumnSize="ColumnSize.Is7" />
    <SkeletonItem ColumnSize="ColumnSize.Is4" />
    <SkeletonItem ColumnSize="ColumnSize.Is4" />
    <SkeletonItem ColumnSize="ColumnSize.Is6" />
    <SkeletonItem ColumnSize="ColumnSize.Is8" />
</Skeleton>

Table

SkeletonTable allows you to scaffold a basic table structure by utilizing the Rows and Columns parameters to define the size of the table. 
<SkeletonTable Rows="5" Columns="4" />

Best Practices

Do

  • Use Skeleton to help ease a UI transition when we know the service will potentially take a longer amount of time to retrieve the data.

  • Provide size for each of the Skeleton elements you used to build a skeleton layout looking as close as possible to real content it is replacing.

  • Use Skeleton if you know the UI loading time is longer than 1 second.

Don't

  • Build Skeleton UI with a lot of details. Circles and rectangles are really as detailed as you want to get. Adding more detail will result in confusion once the UI loads.

  • Use Skeleton if you are confident that the UI will take less than a second to load.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page