The Skeleton component is used to display placeholder content while the real data is loading. This helps improve perceived performance and provides users with a visual cue of the content structure.

• Loading states: Mimics the layout of actual content.
• Variants: Supports pulse animation and other visual styles.
• Customizable size and shape: Works with rectangles, circles, and custom dimensions.
• Flexible usage: Can wrap actual content, which is revealed once isLoading is false.

Usage Example

Preview

Code

<script lang="ts">
  import { Skeleton } from "@fefade-ui/svelte"
</script>

<div style="max-width: 200px; margin: 0 auto; ">
  <Skeleton isLoading style="width: 200px; height: 200px;">
    <span>content</span>
  </Skeleton>

  <Skeleton isLoading style="width: 200px; height: 200px; border-radius: 100%;">
    <span>content</span>
  </Skeleton>

  {#each Array.from(Array(5)) as _, i (i)}
    <Skeleton isLoading variant="pulse" style="width: 200px; height: 16px;">
      <span>content</span>
    </Skeleton>
    <br />
  {/each}
</div>

Props

Prop	Type	Default	Description
isLoading	boolean	true	Whether the skeleton is visible or the real content should be displayed.
variant	"pulse" | "wave"	"wave"	Visual style of the skeleton animation.
style	CSSProperties	—	Inline styles for width, height, border radius, etc.
class	string	—	Additional classes to customize styling.

Notes

• Use Skeleton around components that load asynchronously.
• For circular content, adjust border-radius to 50%.
• Can be combined with multiple skeletons to mimic complex layouts.