Spinners

Indiquez l'état de chargement d'un composant ou d'une page avec des spinners Bootstrap, entièrement construits avec HTML, CSS et sans JavaScript.

Sur cette page

À propos de

Les "spinners" Bootstrap peuvent être utilisés pour afficher l'état de chargement de vos projets. 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 alignement et leur taille peuvent être facilement personnalisés grâce à nos incroyables classes utilitaires.

Pour des raisons d'accessibilité, chaque chargeur comprend ici role="status"et un fichier <span class="visually-hidden">Loading...</span>.

L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité .

Fileur de bordure

Utilisez les roulettes de bordure pour un indicateur de chargement léger.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Couleurs

Le spinner de bordure utilise currentColorpour sa border-color, ce qui signifie que vous pouvez personnaliser la couleur avec des utilitaires de couleur de texte . Vous pouvez utiliser n'importe lequel de nos utilitaires de couleur de texte sur le spinner standard.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Pourquoi ne pas utiliser les border-colorutilitaires ? Chaque spinner de bordure spécifie une transparentbordure pour au moins un côté, donc les .border-{color}utilitaires l'écraseraient.

Spinner en pleine croissance

Si vous n'avez pas envie d'un spinner de bordure, passez au spinner de croissance. Bien qu'il ne tourne pas techniquement, il pousse à plusieurs reprises !

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Encore une fois, ce spinner est construit avec currentColor, vous pouvez donc facilement modifier son apparence avec les utilitaires de couleur de texte . Le voici en bleu, avec les variantes prises en charge.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Alignement

Les spinners dans Bootstrap sont construits avec rems currentColor, et display: inline-flex. Cela signifie qu'ils peuvent facilement être redimensionnés, recolorés et rapidement alignés.

Marge

Utilisez des utilitaires de marge comme .m-5pour un espacement facile.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Placement

Utilisez les utilitaires flexbox , les utilitaires flottants ou les utilitaires d' alignement de texte pour placer les spinners exactement là où vous en avez besoin dans n'importe quelle situation.

Fléchir

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Chargement...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Flotteurs

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Alignement du texte

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Taille

Ajoutez .spinner-border-smet .spinner-grow-smpour créer un spinner plus petit qui peut être rapidement utilisé dans d'autres composants.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Vous pouvez également utiliser des styles CSS ou intégrés personnalisés pour modifier les dimensions selon vos besoins.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Boutons

Utilisez des flèches dans les boutons pour indiquer qu'une action est en cours de traitement ou en cours. Vous pouvez également échanger le texte de l'élément spinner et utiliser le texte du bouton si nécessaire.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Toupet

variables

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Images clés

Utilisé pour créer les animations CSS pour nos spinners. Inclus dans scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}