Ładowarka Bootstrap 5

Å‚adowarka

Aby utworzyć spławiacz/ładowarkę, uśłőżyj: .spławiacz-ramka Klasa:

Przykład

<div class="spławiacz-ramka"></div>

Spróbuj sam

Kolorowy Å‚adowarka

Uśłőżyj dowolny kolor tekstu utilites, aby dodać ścianę do spławiacza:

Przykład

<div class="spławiacz-ramka tekst-słaby"></div>
<div class="spławiacz-ramka tekst-wazny"></div>
<div class="spławiacz-ramka tekst-udany"></div>
<div class="spławiacz-ramka tekst-informacyjny"></div>
<div class="spławiacz-ramka tekst-łatwy"></div>
<div class="spławiacz-ramka tekst-niejasny"></div>
<div class="spławiacz-ramka tekst-drugi"></div>
<div class="spławiacz-ramka tekst-ciemny"></div>
<div class="spławiacz-ramka tekst-jasny"></div>

Spróbuj sam

Rozładowy ładowarka

Jeśli chcesz, łeby spławiacz/ładowarka rośła, a nie ściska się, uśłőżyj: .spławiacz-rozładowy Klasa:

Przykład

<div class="spławiacz-rozładowy tekst-słaby"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>

Spróbuj sam

Rozmiaru ładowarki

Użyj .spinner-border-sm lub .spinner-grow-sm Utwórz mniejszą ładowarkę:

Przykład

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

Spróbuj sam

Przyciski z ładowarką

Możesz również dodać do przycisku ładowarkę, niezależnie od tego, czy ma ona tekst czy nie:

Przykład

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Ładowanie...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Ładowanie...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Ładowanie...
</button>

Spróbuj sam