Spineri
Indicați starea de încărcare a unei componente sau a unei pagini cu ajutorul filatoarelor Bootstrap, construite în întregime cu HTML, CSS și fără JavaScript.
Despre
„Spinnerele” Bootstrap pot fi folosite pentru a afișa starea de încărcare în proiectele dvs. Sunt construite numai cu HTML și CSS, ceea ce înseamnă că nu aveți nevoie de JavaScript pentru a le crea. Cu toate acestea, veți avea nevoie de ceva JavaScript personalizat pentru a le comuta vizibilitatea. Aspectul, alinierea și dimensionarea lor pot fi personalizate cu ușurință cu ajutorul uimitoarelor noastre clase de utilitate.
În scopuri de accesibilitate, fiecare încărcător de aici include role="status"și un fișier <span class="sr-only">Loading...</span>.
Rotor de frontieră
Folosiți chenarele pentru un indicator de încărcare ușor.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>Culori
Spinnerul de chenar folosește currentColorpentru el border-color, ceea ce înseamnă că puteți personaliza culoarea cu utilitare pentru culoarea textului . Puteți folosi oricare dintre utilitarele noastre de culoare pentru text pe spinnerul standard.
<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>De ce să nu folosești border-colorutilități? Fiecare chenar specifică un transparentchenar pentru cel puțin o parte, așa că .border-{color}utilitățile ar înlocui asta.
Spiner în creștere
Dacă nu vă place un spinner de bordură, treceți la spinner de creștere. Deși nu se învârte din punct de vedere tehnic, crește în mod repetat!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>Încă o dată, acest spinner este construit cu currentColor, astfel încât să-i poți schimba cu ușurință aspectul cu utilitare de culoare text . Iată-l în albastru, alături de variantele suportate.
<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>Aliniere
Spinnerele din Bootstrap sunt construite cu rems, currentColor, și display: inline-flex. Aceasta înseamnă că pot fi cu ușurință redimensionate, recolorate și aliniate rapid.
Marja
Utilizați utilități de marjă, cum ar fi .m-5pentru spațiere ușoară.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>Plasarea
Folosiți utilitarele flexbox , utilitarele float sau utilitarele de aliniere a textului pentru a plasa spinnerele exact acolo unde aveți nevoie de ele în orice situație.
Contracta
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div><div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>Plutitoare
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>Aliniere text
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>mărimea
Adăugați .spinner-border-smși .spinner-grow-smpentru a face un spinner mai mic care poate fi utilizat rapid în alte componente.
<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>Sau, utilizați CSS personalizat sau stiluri inline pentru a modifica dimensiunile după cum este necesar.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>Butoane
Folosiți rotativele din butoane pentru a indica că o acțiune este în curs de procesare sau are loc. De asemenea, puteți schimba textul din elementul rotativ și puteți utiliza textul butonului după cum este necesar.
<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>