Blazorise Skeleton component

Use loading placeholders for your components or pages to indicate something may still be loading.

Skeletons can be used to enhance the experience of your application. They are used to indicate that something is still loading or that the content is not yet available.

Structure

• <Skeleton> The main container, used to define the skeleton layout.

  • <SkeletonItem> used to define the size of the skeleton element.

Examples

<Skeleton>
    <SkeletonItem ColumnSize="ColumnSize.Is6" />
</Skeleton>

<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>

<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>

<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

Attributes

Skeleton

SkeletonItem

SkeletonTable