Components

Skeleton

Placeholders in the shape of content that is still loading, so the page does not jump when it arrives.

Usage

text draws lines as tall as the text around them, the last of several shorter; rect is a golden rectangle across its container, for an image or a chart; circle stands in for an avatar. A highlight sweeps across while it waits.

LatestTransfer.svelte

<script>
  import { Skeleton } from 'sveltier';
</script>

<!-- aria-busy tells assistive technology to wait for the real content. -->
<section aria-busy={loading}>
  {#if loading}
    <Skeleton type="circle" />
    <Skeleton lines={2} />
    <Skeleton type="rect" />
  {:else}
    …
  {/if}
</section>

Accessibility

Skeletons are hidden from screen readers. Mark the region that is loading with aria-busy="true" and remove it when the content is in, so assistive technology waits for the real content. Under reduced motion the highlight does not sweep.

API

Name	Type	Default	Description
`type`	`'text' \| 'rect' \| 'circle'`	`'text'`	Lines of text, a golden rectangle that fills the width (an image, a chart), or a circle (an avatar).
`lines`	`number`	`1`	Lines of text; the last of several is φ⁻¹ as wide.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The diameter of a circle: the control height of the size.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLSpanElement \| null`	`–`	The root element, bindable with `bind:ref`.