Skip to content
FEEDBACK · FREE

SkeletonPreset

Ready-made loading placeholders for cards, lists, tables and profiles.

Ready-made loading placeholders for cards, lists, tables, profiles and paragraphs, announcing the busy state to assistive technology.

Why it helps

  • Ready presets
  • Busy state announced
  • Fast to use

Where it fits

  • Cards
  • Tables
  • Profiles
SkeletonPreset control in a RayCraft page

Example

<Stack Wrap="true" Spacing="6" Align="flex-start">
    <div style="width:15rem"><SkeletonPreset Kind="SkeletonKind.Card" /></div>
    <div style="width:15rem"><SkeletonPreset Kind="SkeletonKind.List" Rows="3" /></div>
    <div style="width:18rem"><SkeletonPreset Kind="SkeletonKind.Table" Rows="3" /></div>
    <div style="width:15rem"><SkeletonPreset Kind="SkeletonKind.Profile" /></div>
    <div style="width:15rem"><SkeletonPreset Kind="SkeletonKind.Paragraph" Rows="4" /></div>
</Stack>

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation