linkedin behance copy

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

A propos

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-motion requê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 currentColor pour sa border-color, ce qui signifie que vous pouvez personnaliser la couleur avec des utilitaires de couleur de texte. You can use any of our text color utilities on the standard spinner.

<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-color utilitaires ? Chaque spinner de bordure spécifie une transparent bordure pour au moins un côté, donc les .border-{color} utilitaires l'écraseraient.

Spinner en 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-5 pour un espacement facile.

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

Placement

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

Flexibilité

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Loading... 
<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 de texte

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

Dimensionnement

Ajouter .spinner-border-sm et .spinner-grow-sm pour 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>

Sass

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;

Image clé

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;
  }
}

© 2010-2022 Quazerty.