Spinner
Geben Sie den Ladezustand einer Komponente oder Seite mit Bootstrap-Spinnern an, die vollständig mit HTML, CSS und ohne JavaScript erstellt wurden.
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>
.
prefers-reduced-motion
Medienanfrage. Weitere Informationen finden Sie im Abschnitt zur
reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .
Grenzspinner
Verwenden Sie die Grenzspinner für eine leichte Ladeanzeige.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Farben
Der Border Spinner verwendet currentColor
dafü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.
<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>
border-color
Dienstprogramme verwenden? Jedes Grenzauswahlfeld gibt einen
transparent
Rand 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!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Noch einmal, dieses Spinner wurde mit currentColor
erstellt, sodass Sie sein Aussehen einfach mit Textfarben-Utilities ändern können . Hier in Blau, zusammen mit den unterstützten Varianten.
<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 rem
s 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-5
für einfache Abstände.
<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
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
Schwimmt
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Textausrichtung
<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-sm
und hinzu .spinner-grow-sm
, um einen kleineren Spinner zu erstellen, der schnell in anderen Komponenten verwendet werden kann.
<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.
<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.
<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
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;
}
}