Mushilu-San UI Skeleton
A grey placeholder that shows the shape of content while it loads.
Selector: mui-skeleton
import { Skeleton } from '@mushilu-san/ui/feedback';Loading example…
Overview
text lines, a rect or a circle. Set lines for several text lines and width or height to match the final layout.
aria-busy="true", and a label or the final content tells the user when it is ready.
When to use
A card or list that takes a moment to load, so the layout does not jump. Matching the final shape of a profile, article or table.
When not to use
An unknown wait with no shape to show. Use a spinner. Use Spinner instead.
Guidelines
Do
Match the size of the skeleton to the content it replaces. Remove the skeleton as soon as the content is ready.
Don't
Do not leave skeletons on screen after a failed load. Show an error instead.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — | aria-busy="true" on the region that is loading. |
Reduced motion stops the pulse. Screen readers do not read skeleton blocks.
API
Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'circle' | 'text' | 'rect' | 'text' | Shape of the placeholder: `text` lines, a `rect` or a `circle`. Default `text`. |
width | string | undefined | — | CSS size, e.g. "200px" or "100%". For circle, used as the diameter. |
height | string | undefined | — | Height of the placeholder as a CSS length. |
lines | number | 1 | Number of placeholder lines (text variant only). |
CSS parts
::part(item)::part(root)
Tokens
--mui-color-surface-raised--mui-color-border--mui-radius-md