Skeleton
Placeholder shapes while content loads.
Daily order totals per region…
<mm-skeleton loading shape="text" count="3">
<p>Daily order totals per region…</p>
</mm-skeleton>
Guidance
Skeletons hold the shape of content that is on its way: text lines, a block, an avatar circle
or table rows, in a fill mixed from mm-rule and paper. Wrap the real content and toggle loading: the placeholder
appears only after 200ms, so fast loads never flash, and once shown it stays at least 400ms
before the slotted content swaps in. The container is aria-busy while loading.
The only motion is a very slow opacity breath, never a gradient sweep, and none under reduced motion.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
loading | loading | boolean | false | Whether the content is loading. |
shape | shape | SkeletonShape | 'text' | text (default), rect, circle or table-row. |
count | count | number | 3 | Lines for text, rows for table-row. |
columns | columns | number | 4 | Columns for table-row. The last column is right-aligned like a number column. |
Slots
| Slot | Description |
|---|---|
| Default | The real content, shown once loading finishes. |
CSS parts
| Part | Description |
|---|---|
base | The busy container. |
placeholder | The placeholder shapes. |
CSS custom properties
| Property | Description |
|---|---|
--mm-skeleton-width | Width of rect and circle. Defaults to 100% and 32px. |
--mm-skeleton-height | Height of rect and circle. Defaults to 96px and 32px. |
Examples
Every state of mm-skeleton in Storybook, with keyboard and screen reader tests.