Skeleton
The skeleton component provides a placeholder for content that is loading, giving users a visual indication of where content will appear once it has loaded.
Usage
The skeleton renders a placeholder element and sizes itself via standard HTML/CSS. Use the `style`, `class`, `width` and `height` attributes (or the `justify` prop) to control its dimensions.
<script>
import { Skeleton } from 'fluentui-svelte';
</script>
<Skeleton style="width: 42px;" />
<Skeleton justify style="height: 12px;" />Animation
The `animation` prop controls which type of animation is used for the skeleton. It can be set to `pulse` or `wave`. The default is `wave`.
Justify
Control if the skeleton should take the full width of its container or not. The default is `false`, meaning it will only take the `1:1` ratio of its width.
Shape
The `shape` prop allows you to change the shape of the skeleton. It can be set to `circle`, `square`, or `rounded`. The default is `rounded`.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
as | 'div' | 'span' | 'div' | The HTML element to render the skeleton as. |
animation | 'wave' | 'pulse' | 'wave' | The animation played while the content is loading. |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | The skeleton can have a circular, rounded or square shape. |
justify | boolean | The skeleton is justified to the full width of the container. | |
ref bindable | HTMLElement | The DOM reference of the skeleton element. | |
| HTML Attributes |