Skeleton
Material Design 3-styled loading-placeholder web component (lit-material-skeleton).
- 1.1 KB gzipped
- @lit-material/skeleton 0.0.3
- Renders on the server
Example
Skeleton
A loading placeholder — text, circular, rectangular, or rounded, pulsing, waving, or static.
<lit-material-skeleton variant="text" animation="pulse"></lit-material-skeleton>
A typical card placeholder
Install
npm install @lit-material/skeleton @lit-material/tokensimport "@lit-material/skeleton";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-skeleton>
A loading placeholder — a plain, animated (or static) block standing in
for content that hasn't arrived yet. Purely decorative: it carries no
accessible content of its own (aria-hidden), since a screen reader
announcing a shape that's about to disappear isn't useful. If your UI
needs to *tell* assistive tech that something is loading, put
aria-busy="true" (and, if relevant, an aria-live region for the
eventual result) on your own container — that's a statement about your
page's state, not something this element can make on your behalf.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | SkeletonVariant | "text" | |
animation | animation | SkeletonAnimation | "pulse" | |
width | width | string | "" | Any CSS length (e.g. "100%", "12rem") — falls back to a per-variant default when unset. |
height | height | string | "" | Any CSS length — falls back to a per-variant default when unset. |
CSS parts
| Part | Description |
|---|---|
skeleton | The placeholder block (color, size, shape, animation). |