Die Anleitung zu Bootstrap Spinner

Bootstrap Spinner
Spinner und Color
Die Größe vom Spinner
Spinner in einer Button
Placement

1. Bootstrap Spinner

Sie können Bootstrap Spinner benutzen um den Laden-zustand (loading state) der Applikaton oder eines Prozess anzuzeigen. Bootstrap Spinner wird mit HTML und CSS nur gebaut so brauchen Sie Javascript nicht um es zu erstellen aber Sie können Javascript ein bissschen brauchen um die Versteckung oder Anzeige von Bootstrap Spinner zu kontrollieren.

Die einfachste Maßnahme zur Erstellung eines Spinner:

<!-- Spinner -->

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

Einen Gerät Screen Reader –freundlichen Spinner erstellen:

Spinner

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

role = "status"	Dem Gerät Screen Reader informieren, dass das ein Element zur Bezeichnung des Verfahren (Zustand) eines Aufgabe ist.
<span class="sr-only"> Loading... </span>	Das ist ein verstecktes Element in die üblichen Geräten. Aber es kann durch das Gerät Screen Reader sondiert werden.

Die Spinner-Typen vonBootstrap:

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

Das volle Beispiele sehen:

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

Durch die Verwendung der Utility-Klasse Text Color können Sie die Farbe für Spinner einstellen

.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. Die Größe vom Spinner

Das Einfügen der Klasse .spinner-border-sm oder .spinner-grow-sm in einem Spinner hilft es verkleinen. Das ist notwendig wenn Sie Ihr Spinner in einem component stellen möchten, z.B 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>

Fügen Sie die Klasse .spinner-border-lg oder .spinner-grow-lg in einem Spinner ein wenn Sie ein größere Spinner möchten.

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

Sie können die Größe vom Spinner durch CSS anpassen:

<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 in einer Button

Die Spinner innerhalb einer Button oder eines Komponent stellen.

<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

Verwenden Sie einige Utility-Klassen in Bootsrap zur Gestaltung der Position von Spinner:

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>

Mehr sehen:
Die Anleitung zu Bootstrap Text Utility
Bootstrap Float
Học Bootstrap Typography