Skeleton
A Skeleton component is a loading state that acts as a placeholder for content within an interface.
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.Skeleton block #
The skeleton block is a simple block element with a pulsating animation that can be used to indicate that content is being loaded.
It has a minimum height of 4.5em.
<Skeleton />
If you insert text inside this block, you can make its height dynamic:
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>
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
SkeletonLine is a simple line element which represents a paragraph.
Each SkeletonLine will render as a separate loading line.
<Skeleton Type="SkeletonType.Lines">
<SkeletonLine />
<SkeletonLine />
<SkeletonLine />
<SkeletonLine />
<SkeletonLine />
</Skeleton>Width #
You can set the width of the skeleton line by using the
Width parameter.
<Skeleton Type="SkeletonType.Lines">
<SkeletonLine Width="60" />
<SkeletonLine Width="75" />
<SkeletonLine Width="25" />
</Skeleton>Colors #
You can set the color of the skeleton line by using the
Color parameter.
In the following example, we set the color to Primary.
<Skeleton Color="SkeletonColor.Primary" />
You can also set the color of the individual lines by using the
Color parameter of the SkeletonLine component.
In the following example, we set the color of the individual lines to 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 #
In the following example, we set
IsSkeleton to true to show the skeleton state of the button.
<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;
}
}