Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit


Provide a placeholder graphic combination where you need to wait for content to load

When to use

  • When the network is slow and it takes a long time to wait for the loading process
  • Lists/cards with more graphic information content
  • Only used when loading data for the first time
  • Can be completely replaced by Spin, but can provide better visual effects and user experience than Spin in available scenarios

Suitable for display when loading avatars, pictures, etc.


It can be set to a circle display by setting the Circle property

Applicable to display when loading large paragraphs of text and other types


The default paragraph skeleton screen only displays three lines. If you need multiple lines to occupy space, please place multiple SkeletonParagraph.

Suitable for display when the edit form is loaded


Applicable to display when the edit table is loaded

@page "/skeletons"
@inject IStringLocalizer<Skeletons> Localizer




<ul class="ul-demo">

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <div class="row g-3 skeleton-demo">
        <div class="col-4">
            <SkeletonAvatar Round="false" />
        <div class="col-4">
            <SkeletonAvatar />
        <div class="col-4">
            <SkeletonAvatar Circle="true" />

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <SkeletonParagraph />

<Block Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]">
    <SkeletonEditor />

<Block Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]">
    <SkeletonTable />

B 站相关视频链接



QQ Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload