Skeleton

UI Feedback

Loading placeholder with rect, circle, and text shapes — shimmer, pulse, wave, blink, and glow animations with stagger delay support.

Import

ts 
import Skeleton from '$lib/components/Skeleton.svelte';

Usage

svelte 
<!-- Rectangle (default) -->
<Skeleton shape="rect" height="80px" radius="0.75rem" />

<!-- Circle -->
<Skeleton shape="circle" width="3rem" />

<!-- Multi-line text block -->
<Skeleton shape="text" lines={4} />

<!-- Custom animation -->
<Skeleton shape="rect" height="1rem" animation="pulse" />

Shapes

Three shapes: rect for blocks and images, circle for avatars, text for multi-line text paragraphs.

rect
circle
text

Animations

Choose an animation style with the animation prop. Use the buttons below to preview each option live.

svelte 
<Skeleton animation="shimmer" />   <!-- shiny sweep (default) -->
<Skeleton animation="pulse" />    <!-- breathes in and out -->
<Skeleton animation="wave" />     <!-- gentle wave -->
<Skeleton animation="blink" />    <!-- step blink -->
<Skeleton animation="glow" />     <!-- accent color glow -->
<Skeleton animation="none" />     <!-- static, no animation -->

Stagger Delay

Use the delay prop (milliseconds) to stagger animations across multiple skeletons for a wave-like effect.

svelte 
<!-- Staggered loading cards -->
{#each [0, 1, 2] as i}
  <Skeleton shape="rect" height="1rem" delay={i * 60} />
{/each}

Example — Profile Card

A realistic profile loading state combining all three shapes.

API Reference

PropTypeDefaultDescription
shape 'rect' | 'circle' | 'text''rect'Shape of the skeleton element. rect for blocks, circle for avatars, text for multi-line text blocks.
animation 'shimmer' | 'pulse' | 'wave' | 'blink' | 'glow' | 'none''shimmer'Loading animation style applied to the skeleton.
width string'100%'CSS width value. For circle shape, also controls the height.
height string'1rem'CSS height value. Ignored when shape is circle or text.
radius string'0.5rem'CSS border-radius value. Ignored when shape is circle.
lines number3Number of text lines to render when shape is text.
delay number0Animation delay in milliseconds. Useful for staggering multiple skeletons.
style string''Additional inline CSS styles passed to the root element.
class string''Additional CSS classes passed to the root element.