Composant · Feedback

SkeletonText

Stable

Placeholders de texte animés, utilisables pour les chargements partiels de blocs de contenu.

Exemples

Ligne simple

Voir le code (Svelte)

<SkeletonText lines={1} />

Titre simulé

Voir le code (Svelte)

<div class="docs-demo-stack">
  <SkeletonText lines={1} heading width="10rem" />
  <SkeletonText lines={1} width="70%" />
  <SkeletonText lines={1} width="58%" />
</div>

Paragraphe simulé

Voir le code (Svelte)

<SkeletonText lines={4} paragraph />

Largeurs personnalisées

Voir le code (Svelte)

<div class="docs-demo-stack">
  <SkeletonText lines={3} width="100%" />
  <SkeletonText lines={2} width="85%" />
</div>

API

Prop	Type	Default
`lines`	`number`	`1`
`width`	`string`	auto (100%)
`heading`	`boolean`	`false`
`paragraph`	`boolean`	`false`
`class`	`string`	optionnel
`...props`	`HTMLAttributes<HTMLDivElement>`	transmis

Le composant rend un <div role="status" aria-label="Loading…" aria-busy="true"> contenant des lignes span. Si paragraph vaut true, lines est forcé à au moins 3.

Notes d’usage

Utilisez une largeur explicite pour aligner visuellement le squelette avec le texte réel qui remplacera le placeholder.
Pour les paragraphes courts, gardez lines bas et paragraph désactivé ; pour les blocs de texte long, activez paragraph.
Le placeholder est décoratif: conservez un contenu accessible réel sous-jacent si la zone contient des données critiques.
L’animation de shimmer est arrêtée en mode prefers-reduced-motion.

Tokens utilisés

--st-semantic-surface-subtle
--st-semantic-border-subtle