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 | null | The DOM reference of the skeleton element. | |
| HTML Attributes |