Błystki

Wskaż stan ładowania komponentu lub strony za pomocą spinnerów Bootstrap, zbudowanych w całości z HTML, CSS i bez JavaScript.

O

Bootstrapowe „spinnery” mogą służyć do pokazywania stanu ładowania w swoich projektach. Są zbudowane tylko z HTML i CSS, co oznacza, że nie potrzebujesz żadnego JavaScriptu do ich tworzenia. Będziesz jednak potrzebował niestandardowego kodu JavaScript, aby przełączyć ich widoczność. Ich wygląd, wyrównanie i rozmiar można łatwo dostosować za pomocą naszych niesamowitych klas użyteczności.

Ze względu na ułatwienia dostępu każdy moduł ładujący zawiera tutaj role="status"i zagnieżdżony <span class="sr-only">Loading...</span>.

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania o media. Zobacz zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .

Granica spinner

Użyj tarczy granicznej, aby uzyskać lekki wskaźnik ładowania.

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

Zabarwienie

Pokrętło obramowania używa currentColordo tego celu border-color, co oznacza, że możesz dostosować kolor za pomocą narzędzi do kolorowania tekstu . Możesz użyć dowolnego z naszych narzędzi do kolorowania tekstu na standardowej tarczy.

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

Dlaczego nie skorzystać z border-colornarzędzi? Każdy spinner obramowania określa transparentobramowanie dla co najmniej jednej strony, więc .border-{color}narzędzia zastąpią to.

Rosnąca spinner

Jeśli nie masz ochoty na spinner graniczny, przełącz się na spinner do uprawy. Chociaż technicznie nie kręci się, to ciągle rośnie!

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

Po raz kolejny ten spinner jest zbudowany z currentColor, więc możesz łatwo zmienić jego wygląd za pomocą narzędzi do kolorowania tekstu . Tutaj jest w kolorze niebieskim, wraz z obsługiwanymi wariantami.

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

Wyrównanie

Spinnery w Bootstrap są zbudowane z rems currentColor, i display: inline-flex. Oznacza to, że można je łatwo zmienić rozmiar, zmienić kolor i szybko wyrównać.

Margines

Używaj narzędzi do tworzenia marginesów, takich jak .m-5łatwe rozmieszczanie.

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

Umieszczenie

Użyj narzędzi flexbox , narzędzi pływających lub narzędzi do wyrównywania tekstu, aby umieścić tarcze dokładnie tam, gdzie są potrzebne w każdej sytuacji.

Przewód

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

Ładowanie...

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

Pływa

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

Wyrównaj tekst

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

Rozmiar

Dodaj .spinner-border-smi .spinner-grow-smstwórz mniejszą tarczę, którą można szybko wykorzystać w innych komponentach.

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

Możesz też użyć niestandardowych stylów CSS lub wbudowanych, aby zmienić wymiary zgodnie z potrzebami.

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

guziki

Użyj spinnerów w przyciskach, aby wskazać, że akcja jest aktualnie przetwarzana lub ma miejsce. Możesz także zamienić tekst z elementu spinner i użyć tekstu przycisku w razie potrzeby.

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