Skeleton

A placeholder component that displays a loading animation while content is being fetched or rendered.

Anatomy 

<script>
  import {
    Skeleton,
    SkeletonCircle,
    SkeletonText,
  } from "@saas-ui/svelte/components/skeleton";
</script>

<Skeleton height="20px" width="100%" />
<SkeletonCircle size="40px" />
<SkeletonText lines={3} />

Examples

Basic Accessibility

Basic skeleton with default styling.

Circle Sizes Accessibility

Use the size prop on SkeletonCircle to control the circle dimensions.

Composite Accessibility

Combine skeleton elements to create loading placeholders.

Content Loading Accessibility

Toggle loading state to show/hide content.

Feed Accessibility

Feed-style skeleton with avatar, text, and image placeholders.

Text Accessibility

Use SkeletonText for multi-line text placeholders.

Text Lines Accessibility

Use the lines prop on SkeletonText to control the number of text lines.

Variants Accessibility

Use the variant prop to change the animation style.

With Children Accessibility

Wrap children to show skeleton while loading.

Props

Prop Type Default Description
loading boolean true Whether to show the skeleton loading state.
variant pulse | shine | none pulse The animation variant.
height text - The height of the skeleton.
width text - The width of the skeleton.
class text - CSS class to apply to the component.