Feedback
Skeleton
Placeholder shapes that hold the place of content while it loads.
| Class name | Type | Description |
|---|---|---|
skeletonplf:skeleton | Component | A placeholder shape |
skeleton-circleplf:skeleton-circle | Modifier | A circle, such as for an avatar |
<div class="skeleton"></div><div class="plf:skeleton"></div>import { Skeleton } from '@pelatform/react';
export function Example() {
return <Skeleton />;
}import { Skeleton } from '@pelatform/react/prefixed';
export function Example() {
return <Skeleton />;
}<div class="skeleton skeleton-circle"></div><div class="plf:skeleton plf:skeleton-circle"></div>import { Skeleton } from '@pelatform/react';
export function Example() {
return <Skeleton circle />;
}import { Skeleton } from '@pelatform/react/prefixed';
export function Example() {
return <Skeleton circle />;
}<div class="skeleton" style="--plf-skeleton-height: 120px"></div>
<div class="skeleton" style="--plf-skeleton-width: 75%"></div>
<div class="skeleton" style="--plf-skeleton-width: 50%"></div>
<div class="skeleton skeleton-circle" style="--plf-skeleton-width: 32px; --plf-skeleton-height: 32px"></div><div class="plf:skeleton" style="--plf-skeleton-height: 120px"></div>
<div class="plf:skeleton" style="--plf-skeleton-width: 75%"></div>
<div class="plf:skeleton" style="--plf-skeleton-width: 50%"></div>
<div class="plf:skeleton plf:skeleton-circle" style="--plf-skeleton-width: 32px; --plf-skeleton-height: 32px"></div>import type { CSSProperties } from 'react';
import { Skeleton } from '@pelatform/react';
export function Example() {
return (
<>
<Skeleton style={{ '--plf-skeleton-height': '120px' } as CSSProperties} />
<Skeleton style={{ '--plf-skeleton-width': '75%' } as CSSProperties} />
<Skeleton style={{ '--plf-skeleton-width': '50%' } as CSSProperties} />
<Skeleton circle style={{ '--plf-skeleton-width': '32px', '--plf-skeleton-height': '32px' } as CSSProperties} />
</>
);
}import type { CSSProperties } from 'react';
import { Skeleton } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<Skeleton style={{ '--plf-skeleton-height': '120px' } as CSSProperties} />
<Skeleton style={{ '--plf-skeleton-width': '75%' } as CSSProperties} />
<Skeleton style={{ '--plf-skeleton-width': '50%' } as CSSProperties} />
<Skeleton circle style={{ '--plf-skeleton-width': '32px', '--plf-skeleton-height': '32px' } as CSSProperties} />
</>
);
}Loading state
Put the role="status" text outside the aria-busy container, and remove aria-busy once the content replaces the placeholders.
Loading profile…
<p role="status">Loading profile…</p>
<div class="flex flex-col gap-4" aria-busy="true">
<div class="skeleton skeleton-circle"></div>
<div class="skeleton"></div>
<div class="skeleton"></div>
</div><p role="status">Loading profile…</p>
<div class="plf:flex plf:flex-col plf:gap-4" aria-busy="true">
<div class="plf:skeleton plf:skeleton-circle"></div>
<div class="plf:skeleton"></div>
<div class="plf:skeleton"></div>
</div>import { Skeleton } from '@pelatform/react';
export function Example() {
return (
<>
<p role="status">Loading profile…</p>
<div className="flex flex-col gap-4" aria-busy="true">
<Skeleton circle />
<Skeleton />
<Skeleton />
</div>
</>
);
}import { Skeleton } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<p role="status">Loading profile…</p>
<div className="plf:flex plf:flex-col plf:gap-4" aria-busy="true">
<Skeleton circle />
<Skeleton />
<Skeleton />
</div>
</>
);
}Inside a table
Keep the real column headers and hide only the placeholder <tbody>.
| Name | Role |
|---|---|
<table class="table" aria-busy="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody aria-hidden="true">
<tr>
<td><div class="skeleton"></div></td>
<td><div class="skeleton"></div></td>
</tr>
<tr>
<td><div class="skeleton"></div></td>
<td><div class="skeleton"></div></td>
</tr>
</tbody>
</table><table class="plf:table" aria-busy="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody aria-hidden="true">
<tr>
<td><div class="plf:skeleton"></div></td>
<td><div class="plf:skeleton"></div></td>
</tr>
<tr>
<td><div class="plf:skeleton"></div></td>
<td><div class="plf:skeleton"></div></td>
</tr>
</tbody>
</table>import { Skeleton, Table } from '@pelatform/react';
export function Example() {
return (
<Table aria-busy="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody aria-hidden="true">
<tr>
<td><Skeleton /></td>
<td><Skeleton /></td>
</tr>
<tr>
<td><Skeleton /></td>
<td><Skeleton /></td>
</tr>
</tbody>
</Table>
);
}import { Skeleton, Table } from '@pelatform/react/prefixed';
export function Example() {
return (
<Table aria-busy="true">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody aria-hidden="true">
<tr>
<td><Skeleton /></td>
<td><Skeleton /></td>
</tr>
<tr>
<td><Skeleton /></td>
<td><Skeleton /></td>
</tr>
</tbody>
</Table>
);
}React
Skeleton from @pelatform/react renders this markup from its props.
| Prop | Values | Default |
|---|---|---|
circle |
true for a circle, such as for an avatar |
false |
The other props are a native div’s, className and ref included.
CSS variables
Override on a root or on a single placeholder.
| Variable | Default |
|---|---|
--plf-skeleton-bg |
--plf-color-surface-muted |
--plf-skeleton-width |
100%; 3rem (48px) for a circle |
--plf-skeleton-height |
Space 4 (16px); 3rem (48px) for a circle |
--plf-skeleton-radius |
Large radius (8px); a circle stays round |
--plf-skeleton-duration |
2s for one pulse |