Spinner

Geben Sie den Ladezustand einer Komponente oder Seite mit Bootstrap-Spinnern an, die vollständig mit HTML, CSS und ohne JavaScript erstellt wurden.

Auf dieser Seite

Um

Bootstrap „Spinner“ können verwendet werden, um den Ladezustand in Ihren Projekten anzuzeigen. Sie werden nur mit HTML und CSS erstellt, was bedeutet, dass Sie kein JavaScript benötigen, um sie zu erstellen. Sie benötigen jedoch ein benutzerdefiniertes JavaScript, um ihre Sichtbarkeit umzuschalten. Ihr Aussehen, ihre Ausrichtung und ihre Größe können mit unseren erstaunlichen Nutzungsklassen einfach angepasst werden.

Aus Gründen der Barrierefreiheit enthält jeder Loader hier role="status"und eine verschachtelte <span class="visually-hidden">Loading...</span>.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Grenzspinner

Verwenden Sie die Grenzspinner für eine leichte Ladeanzeige.

html

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

Farben

Der Border Spinner verwendet currentColordafür border-color, was bedeutet , dass Sie die Farbe mit Textfarbdienstprogrammen anpassen können . Sie können jedes unserer Textfarben-Dienstprogramme auf dem Standard-Drehfeld verwenden.

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>

Warum nicht border-colorDienstprogramme verwenden? Jedes Grenzauswahlfeld gibt einen transparentRand für mindestens eine Seite an, sodass .border-{color}Dienstprogramme diesen überschreiben würden.

Wachsender Spinner

Wenn Sie keinen Border Spinner mögen, wechseln Sie zum Grow Spinner. Obwohl es sich technisch gesehen nicht dreht, wächst es immer wieder!

html

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

Noch einmal, dieses Spinner wurde mit currentColorerstellt, sodass Sie sein Aussehen einfach mit Textfarben-Utilities ändern können . Hier in Blau, zusammen mit den unterstützten Varianten.

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>

Ausrichtung

Spinner in Bootstrap werden mit rems currentColor, und erstellt display: inline-flex. Das bedeutet, dass sie einfach in der Größe geändert, neu eingefärbt und schnell ausgerichtet werden können.

Rand

Verwenden Sie Randhilfsmittel wie .m-5für einfache Abstände.

html

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

Platzierung

Verwenden Sie Flexbox-Dienstprogramme , Float-Dienstprogramme oder Textausrichtungs- Dienstprogramme, um Spinner genau dort zu platzieren, wo Sie sie in jeder Situation benötigen.

Biegen

html

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

Wird geladen...

html

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

Schwimmt

html

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

Textausrichtung

html

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

Größe

Fügen Sie .spinner-border-smund hinzu .spinner-grow-sm, um einen kleineren Spinner zu erstellen, der schnell in anderen Komponenten verwendet werden kann.

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>

Oder verwenden Sie benutzerdefiniertes CSS oder Inline-Stile, um die Abmessungen nach Bedarf zu ändern.

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>

Tasten

Verwenden Sie Spinner innerhalb von Schaltflächen, um anzuzeigen, dass eine Aktion gerade verarbeitet wird oder stattfindet. Sie können auch den Text aus dem Spinner-Element austauschen und den Schaltflächentext nach Bedarf verwenden.

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

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Spinner jetzt lokale CSS-Variablen für .spinner-borderund .spinner-growfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

Border-Spinner-Variablen:

  --#{$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;

Wachsende Spinner-Variablen:

  --#{$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;

Für beide Spinner werden kleine Spinner-Modifikatorklassen verwendet, um die Werte dieser CSS-Variablen nach Bedarf zu aktualisieren. Die .spinner-border-smKlasse macht beispielsweise Folgendes:

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

Sass-Variablen

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

Keyframes

Wird zum Erstellen der CSS-Animationen für unsere Spinner verwendet. Eingeschlossen in scss/_spinners.scss.

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

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