Skeleton

Placeholder animé : variantes bj-skeleton--text (défaut), bj-skeleton--heading, bj-skeleton--circle, bj-skeleton--rect ; tailles bj-skeleton--sm, médiane sans classe de taille, bj-skeleton--lg.

Exemple de base

<div class="bj-skeleton bj-skeleton--text" aria-hidden="true"></div>

Variantes de forme

<div class="bj-skeleton bj-skeleton--text" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--heading" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--circle" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--rect" aria-hidden="true"></div>

Tailles (texte)

<!-- sm -->
<div class="bj-skeleton bj-skeleton--text bj-skeleton--sm" aria-hidden="true"></div>
<!-- md : pas de modificateur -->
<div class="bj-skeleton bj-skeleton--text" aria-hidden="true"></div>
<!-- lg -->
<div class="bj-skeleton bj-skeleton--text bj-skeleton--lg" aria-hidden="true"></div>

Forme × taille

Matrice complète : quatre formes × trois tailles (12 combinaisons). La taille md n’ajoute ni --sm ni --lg.

smmdlgtextheadingcirclerect

<!-- text × sm | md | lg -->
<div class="bj-skeleton bj-skeleton--text bj-skeleton--sm" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--text" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--text bj-skeleton--lg" aria-hidden="true"></div>
<!-- heading × sm | md | lg -->
<div class="bj-skeleton bj-skeleton--heading bj-skeleton--sm" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--heading" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--heading bj-skeleton--lg" aria-hidden="true"></div>
<!-- circle × sm | md | lg -->
<div class="bj-skeleton bj-skeleton--circle bj-skeleton--sm" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--circle" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--circle bj-skeleton--lg" aria-hidden="true"></div>
<!-- rect × sm | md | lg -->
<div class="bj-skeleton bj-skeleton--rect bj-skeleton--sm" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--rect" aria-hidden="true"></div>
<div class="bj-skeleton bj-skeleton--rect bj-skeleton--lg" aria-hidden="true"></div>

Groupe (carte placeholder)

<div class="bj-skeleton-group" aria-busy="true" style="max-width: 20rem">
  <div class="bj-skeleton bj-skeleton--rect" aria-hidden="true"></div>
  <div class="bj-skeleton bj-skeleton--heading" aria-hidden="true"></div>
  <div class="bj-skeleton bj-skeleton--text" aria-hidden="true"></div>
</div>

Classes CSS

Classe	Description
`bj-skeleton`	Bloc de base avec animation shimmer.
`bj-skeleton--text`	Ligne de texte placeholder (hauteur ~1em).
`bj-skeleton--heading`	Titre placeholder (hauteur ~1.5em, largeur ~60 %).
`bj-skeleton--circle`	Cercle (avatar).
`bj-skeleton--rect`	Rectangle (image ou bloc).
`bj-skeleton--sm`	Taille réduite (cumulable avec toute variante).
`bj-skeleton--lg`	Taille agrandie.
`Taille md (défaut)`	Pas de classe CSS : Vue <code>size="md"</code> n’ajoute ni <code>--sm</code> ni <code>--lg</code>.
`bj-skeleton-group`	Conteneur empilant plusieurs skeletons avec espacement.