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="visually-hidden">Loading...</span>
.
prefers-reduced-motion
zapytania 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="visually-hidden">Loading...</span>
</div>
Zabarwienie
Pokrętło obramowania używa currentColor
do tego 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="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
narzędzi? Każdy spinner obramowania określa
transparent
obramowanie 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="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 na niebiesko, wraz z obsługiwanymi wariantami.
<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 rem
s currentColor
, i display: inline-flex
. Oznacza to, że można je łatwo zmienić rozmiar, zmienić kolor i szybko wyrównać.
Margines
Użyj narzędzi marginesów, takich jak .m-5
łatwe rozmieszczanie.
<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
<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>
Pływa
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Wyrównaj tekst
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Rozmiar
Dodaj .spinner-border-sm
i .spinner-grow-sm
stwórz mniejszą tarczę, którą można szybko wykorzystać w innych komponentach.
<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.
<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.
<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
Zmienne
$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;
}
}