Le Tutoriel de Bootstrap Spinner

Bootstrap Spinner
Spinner et Color
La taille de Spinner
Spinner dans un Button
Placement

1. Bootstrap Spinner

Vous pouvez utiliser Bootstrap Spinner pour afficher l'état de chargement (loading state) d'une application ou de tout autre processus. Le Bootstrap Spinner est construit uniquement avec HTML et CSS. Par conséquent, vous n'avez pas besoin de Javascript pour le créer mais il est possible que vous ayez besoin d'un peu de Javascript pour contrôler son masquage ou son affichage.

La façon la plus simple de créer un Spinner :

<!-- Spinner -->

<div class="spinner-border"></div>

Créez un Spinner convivial avec un Screen Reader :

Spinner

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

role = "status"	Notifiez à Screen Reader qu'il s'agit d'un élément décrivant le processus (l'état) du travail.
<span class="sr-only"> Loading... </span>	C'est un élément caché dans les appareils normaux, mais il peut être détecté par Screen Reader.

Les types Spinner de Bootstrap :

.spinner-border / .spinner-grow

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div> 

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Voir l'exemple complet :

spinners-example.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Spinner Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>
    <div class="container">
        <h4 class="mb-4 mt-2">spinner-border</h4>

        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>


        <h4 class="mb-4 mt-2">.spinner-grow</h4>

        <div class="spinner-grow" role="status">
          <span class="sr-only">Loading...</span>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
</body>
</html>

2. Spinner et Color

En utilisant les classes deText Color, vous pouvez établir des couleurs pour Spinner.

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50

.spinner-border

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

.spinner-grow

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

3. La taille de Spinner

Ajouter la classe .spinner-border-sm ou .spinner-grow-sm à la classe Spinner ce qui la permet de devenir un peu plus petite. Ceci est nécessaire si vous voulez mettre votre Spinner dans un certain component, tel que Button.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

Ajoutez la classe .spinner-border-lg ou .spinner-grow-lg à une Spinner si vous vouler Spinner soit un peu plus grand.

<div class="spinner-border spinner-border-lg" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow spinner-grow-lg" role="status">
  <span class="sr-only">Loading...</span>
</div>

Vous pouvez également personnaliser la taille de Spinner via CSS :

<div class="spinner-border" style="width: 5rem; height: 5rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="spinner-grow" style="width: 5rem; height: 5rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

4. Spinner dans un Button

Placez les Spinners à l'intérieur d'un Buttonou d'un composant (component).

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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="sr-only">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>

5. Placement

Utilisez quelques classes utilitaires dans Bootstrap pour configurer la position des Spinners :

spinner-placement-example.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Spinner Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <style>
        .my-box {
            height: 50px;
            padding: 5px;
            margin: 10px 0 5px 0;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container-fluid">

        <h4>Flex</h4>
        <div class="my-box d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <div class="my-box d-flex align-items-center">
            <span>Loading...</span>
            <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
        </div>

        <h4>Float</h4>
        <div class="my-box">
            <div class="spinner-border float-right" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

        <h4>Text Align</h4>
        <div class="my-box text-center">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>
</html>

Voir plus :
Le Tutoriel de Bootstrap Text Utility
Bootstrap Float
Học Bootstrap Typography