Skeleton Text

Multi-line text skeleton component for creating realistic paragraph and text block placeholders with natural line width variation.

Demo

Default (3 lines)

Custom Widths

Usage

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

<!-- Default 3 lines -->
<SkeletonText />

<!-- Custom line widths -->
<SkeletonText
	lines={4}
	lineWidths={['100%', '90%', '95%', '70%']}
/>

Props

Prop	Type	Default	Description
`lines`	`number`	`3`	Number of text lines
`lineWidths`	`string[]`	Auto-generated	Custom width for each line
`lastLineWidth`	`string`	`'70%'`	Width of the last line
`animation`	`'shimmer' \\| 'pulse' \\| 'none'`	`'shimmer'`	Animation style
`gap`	`string`	`'var(--space-3)'`	Gap between lines
`class`	`string`	`''`	Additional CSS classes