Błystki

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

Na tej stronie

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="visually-hidden">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.

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">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.

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>

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!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">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.

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>

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.

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">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

html

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

Ładowanie...

html

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

Pływa

html

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

Wyrównaj tekst

html

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

Rozmiar

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

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>

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

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>

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.

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

Zmienne

Dodano w wersji 5.2.0

W ramach ewoluującego podejścia Bootstrap do zmiennych CSS, spinnery używają teraz lokalnych zmiennych CSS w .spinner-bordercelu .spinner-growudoskonalenia dostosowywania w czasie rzeczywistym. Wartości zmiennych CSS są ustawiane przez Sass, więc dostosowywanie Sass jest nadal obsługiwane.

Zmienne Border spinner:

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

Rosnące zmienne spinnera:

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

W przypadku obu spinnerów małe klasy modyfikatorów spinner są używane do aktualizowania wartości tych zmiennych CSS zgodnie z potrzebami. Na przykład .spinner-border-smklasa wykonuje następujące czynności:

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

Zmienne Sassa

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

Klatki kluczowe

Służy do tworzenia animacji CSS dla naszych spinnerów. Zawarte w scss/_spinners.scss.

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

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