Skip to main content

Skeleton

Core skeleton component with multiple variants and animation styles for loading placeholders

Skeleton

The core skeleton component provides versatile loading placeholders with multiple variants and animation styles. Built with glass morphism effects for a modern, sophisticated loading experience.

Animation Styles

Animation Types

Different animation styles for loading states

Loading...
Loading...
Loading...
Loading...

Usage

<script>
import Skeleton from '$lib/shared/components/loading/Skeleton.svelte';
</script>

<!-- Basic text skeleton -->
<Skeleton variant="text" />

<!-- Heading skeleton -->
<Skeleton variant="heading" />

<!-- Avatar skeleton -->
<Skeleton variant="avatar" size="lg" />

<!-- Custom dimensions -->
<Skeleton variant="custom" width="200px" height="100px" />

<!-- Different animations -->
<Skeleton variant="text" animation="pulse" />
<Skeleton variant="text" animation="shimmer" />
<Skeleton variant="text" animation="none" />

Props

PropTypeDefaultDescription
variant'text' \| 'heading' \| 'title' \| 'image' \| 'avatar' \| 'button' \| 'thumbnail' \| 'card' \| 'input' \| 'custom''text'Predefined skeleton style
size'sm' \| 'md' \| 'lg''md'Size modifier for certain variants
animation'shimmer' \| 'pulse' \| 'none''shimmer'Animation style
widthstring-Custom width (CSS value)
heightstring-Custom height (CSS value)
classstring''Additional CSS classes

Variants

Text Variants

  • text: Single line of body text (16px height)
  • heading: Larger text for main headings (24px height)
  • title: Medium text for section titles (20px height)

Interactive Elements

  • button: Button-shaped skeleton (40px height, rounded)
  • input: Input field skeleton (40px height, subtle border)

Media Elements

  • image: 16:9 aspect ratio image placeholder
  • avatar: Circular profile image (sm: 32px, md: 48px, lg: 64px)
  • thumbnail: Square thumbnail image (80x80px)

Layout Elements

  • card: Large rectangular block for card containers (120px height)
  • custom: No preset dimensions, use width/height props

Animation Types

Shimmer (Default)

Creates a wave-like shimmer effect that travels across the element. Best for indicating active loading states:

<Skeleton variant="text" animation="shimmer" />

The shimmer uses a sophisticated gradient that moves from left to right, creating a realistic loading effect.

Pulse

Gentle opacity animation that fades in and out. Ideal for reduced motion preferences or subtle loading states:

<Skeleton variant="text" animation="pulse" />

Animates opacity between 0.6 and 1.0 over 1.5 seconds for a breathing effect.

None

Static skeleton without animation. Useful for static mockups or when animation would be distracting:

<Skeleton variant="text" animation="none" />

Accessibility

  • Uses role="status" and aria-live="polite" for screen reader announcements
  • Includes hidden “Loading…” text for assistive technology
  • Respects prefers-reduced-motion media query - automatically disables animations
  • Proper ARIA attributes for loading states
  • Semantic HTML structure maintained during transitions

Design Details

Glass Morphism Effects

The skeleton uses subtle glass morphism with backdrop blur for a sophisticated appearance:

.skeleton {
  background: color-mix(in oklch, var(--surface) 92%, var(--neutral-500));
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklch, var(--surface) 85%, var(--neutral-400));
}

Dark Mode Optimization

Automatically adjusts colors and opacity in dark mode:

:global(.dark) .skeleton {
  background: color-mix(in oklch, var(--surface) 96%, var(--neutral-600));
  border-color: color-mix(in oklch, var(--surface) 90%, var(--neutral-500));
}

Performance Considerations

  • Uses transform and opacity for GPU-accelerated animations
  • Minimal layout impact during animation
  • Efficient CSS transitions with hardware acceleration
  • Batched DOM updates for multiple skeletons

Common Patterns

Basic Content

<article>
  <Skeleton variant="heading" />
  <Skeleton variant="text" />
  <Skeleton variant="text" width="80%" />
</article>

User Profile

<div class="profile">
  <Skeleton variant="avatar" size="lg" />
  <div>
    <Skeleton variant="title" />
    <Skeleton variant="text" width="60%" />
  </div>
</div>

Interactive Elements

<div class="actions">
  <Skeleton variant="button" />
  <Skeleton variant="button" width="80px" />
  <Skeleton variant="input" />
</div>

Best Practices

  1. Match Content Structure: Use skeleton dimensions that match actual content
  2. Consistent Animation: Use the same animation type across related loading states
  3. Natural Widths: Vary text skeleton widths (100%, 90%, 70%) for realistic appearance
  4. Appropriate Timing: Show skeletons immediately, maintain for minimum 300ms
  5. Smooth Transitions: Fade between skeleton and actual content