in English

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.

html

<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.

html

<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 !

html

<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.

html

<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.

html

<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

html

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

Chargement...

html

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

Flotteurs

html

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

Alignement du texte

html

<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.

html

<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.

html

<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.

html

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

html

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

CSS

variables

Ajouté dans v5.2.0

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les spinners utilisent désormais des variables CSS locales sur .spinner-borderet .spinner-growpour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

Variables de spinner de bordure :

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Variables de spinner croissantes :

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Pour les deux spinners, de petites classes de modificateurs de spinner sont utilisées pour mettre à jour les valeurs de ces variables CSS selon les besoins. Par exemple, la .spinner-border-smclasse effectue les opérations suivantes :

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Variables SSS

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