Espaces réservés

Utilisez des espaces réservés de chargement pour vos composants ou pages pour indiquer que quelque chose est peut-être encore en cours de chargement.

Sur cette page

A propos

Les espaces réservés peuvent être utilisés pour améliorer l'expérience de votre application. Ils sont construits uniquement avec HTML et CSS, ce qui signifie que vous n'avez pas besoin de JavaScript pour les créer. Vous aurez cependant besoin de JavaScript personnalisé pour basculer leur visibilité. Leur apparence, leur couleur et leur taille peuvent être facilement personnalisées avec nos classes utilitaires.

Exemple

Dans l'exemple ci-dessous, nous prenons un composant de carte typique et le recréons avec des espaces réservés appliqués pour créer une "carte de chargement". La taille et les proportions sont les mêmes entre les deux.

Titre de la carte

Quelques exemples de texte rapides à construire sur le titre de la carte et constituant l'essentiel du contenu de la carte.

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

Comment ça fonctionne

Créez des espaces réservés avec la .placeholder classe et une classe de colonne de grille (par exemple, .col-6) pour définir le width. Ils peuvent remplacer le texte à l'intérieur d'un élément ou être ajoutés en tant que classe de modificateur à un composant existant.

Nous appliquons un style supplémentaire à .btns via ::before pour nous assurer que le height est respecté. Vous pouvez étendre ce modèle pour d'autres situations si nécessaire, ou ajouter un dans l'élément pour refléter la hauteur lorsque le texte réel est rendu à sa place.

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

L'utilisation de aria-hidden="true" indique uniquement que l'élément doit être masqué pour les lecteurs d'écran. Le comportement de chargement de l'espace réservé dépend de la manière dont les auteurs utiliseront réellement les styles d'espace réservé, de la façon dont ils prévoient de mettre à jour les éléments, etc. Du code JavaScript peut être nécessaire pour échanger l'état de l'espace réservé et informer les utilisateurs AT de la mise à jour.

Largeur

Vous pouvez modifier les width classes de colonnes de grille traversantes, les utilitaires de largeur ou les styles en ligne.

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Couleur

Par défaut, le placeholder utilise currentColor. Cela peut être remplacé par une couleur personnalisée ou une classe utilitaire.

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Dimensionnement

La taille de .placeholders est basée sur le style typographique de l'élément parent. Personnalisez-les avec des modificateurs de dimensionnement : .placeholder-lg, .placeholder-sm, ou .placeholder-xs.

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Animation

Animez les espaces réservés avec .placeholder-glow ou .placeholder-wave pour mieux transmettre la perception que quelque chose est activement chargé.

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

Sass

Variables

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;

Bootstrap 5.2 | Composants

Placeholder