Kern 0.12.0 GitHub
Feedback

<kern-skeleton>

Placeholder in the shape of content that is still loading, so the layout does not jump. text draws lines (the last one shorter), block a rectangle (cards, stats, charts), circle an avatar or status dot. Hidden from assistive technology; mark the loading container with aria-busy="true" instead.

Examples

Placeholders while loading

text draws lines lines (the last one shorter), block a rectangle with width and height, circle a dot of size. Skeletons are hidden from assistive technology; mark the loading container with aria-busy="true" instead.

<div aria-busy="true" style="display:grid;gap:16px;max-width:360px"> <div style="display:flex;gap:12px;align-items:center"> <kern-skeleton variant="circle" size="32px"></kern-skeleton> <kern-skeleton lines="2"></kern-skeleton> </div> <kern-skeleton lines="3" width="80%"></kern-skeleton> <kern-skeleton variant="block" height="80px"></kern-skeleton> </div>

Replacing with content

Keep the skeleton the same size as the content it stands for, then swap it once the data has arrived, so the layout does not jump.

Load again
<kern-card heading="Bad Lüftung" aria-busy="true" style="max-width:320px"> <div class="body"><kern-skeleton lines="3"></kern-skeleton></div> <kern-button slot="footer" size="sm" class="load">Load again</kern-button> </kern-card> const card = root.querySelector('kern-card'); const body = root.querySelector('.body'); const load = () => { card.setAttribute('aria-busy', 'true'); body.innerHTML = '<kern-skeleton lines="3"></kern-skeleton>'; setTimeout(() => { body.innerHTML = 'Plus 1PM<br>192.168.1.21<br>Firmware 1.4.4'; card.removeAttribute('aria-busy'); }, 1500); }; root.querySelector('.load').addEventListener('click', load); load();

Properties

height
string | undefined

Height of a block, e.g. 80px.

linesdefault 1
number

Number of lines (text).

sizedefault '32px'
string

Diameter of a circle, e.g. 32px.

variantreflectsdefault 'text'
"block" | "circle" | "text"
width
string | undefined

Width, e.g. 120px or 60% (text and block; default 100%).