Skip to content
UI
v0.3.1

Search the docs

Skeleton

A placeholder while content loads.

Example

skeleton.example.svelte 
<script lang="ts">
  import { Skeleton } from '@onlywin/ui-svelte';
</script>

<div class="example-row example-row--top">
  <Skeleton shape="circle" />
  <div class="example-stack example-grow">
    <Skeleton lines={3} />
    <Skeleton shape="block" />
  </div>
</div>

Usage

Do

  • Match the shape of what will load.

Don’t

  • Do not show it for less than 300 ms.

Accessibility

  • Hidden from screen readers; the container announces loading.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Skeleton props
Prop Type Default Description
class string —
lines number 1 Text lines (the last one shorter).
shape 'block' | 'circle' | 'text' 'text'