Спінери
Указуйте стан завантаження компонента або сторінки за допомогою механізмів Bootstrap, створених повністю за допомогою HTML, CSS і без JavaScript.
про
«Спінери» Bootstrap можна використовувати, щоб показати стан завантаження у ваших проектах. Вони створені лише за допомогою HTML і CSS, тобто вам не потрібен JavaScript для їх створення. Однак вам знадобиться спеціальний JavaScript, щоб увімкнути їх видимість. Їх зовнішній вигляд, вирівнювання та розмір можна легко налаштувати за допомогою наших дивовижних класів утиліт.
З міркувань доступності кожен завантажувач тут містить role="status"
і вкладений <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
медіа-запиту. Перегляньте розділ про
обмежений рух нашої документації щодо спеціальних можливостей .
Бордюрний спінер
Використовуйте облямівку для легкого індикатора завантаження.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Кольори
currentColor
Для цього використовується облямівка border-color
, що означає, що ви можете налаштувати колір за допомогою утиліт кольору тексту . Ви можете використовувати будь-яку з наших утиліт кольору тексту на стандартному спінері.
<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>
border-color
утилітами? Кожна межа вказує
transparent
межу принаймні для однієї сторони, тому
.border-{color}
утиліти перевизначатимуть це.
Зростаюча блешня
Якщо вам не подобається бордюрний блешень, перейдіть на блешню для вирощування. Хоча технічно він не обертається, він постійно зростає!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Знову ж таки, цей спінер створено за допомогою currentColor
, тому ви можете легко змінити його зовнішній вигляд за допомогою утиліт кольору тексту . Ось він синього кольору разом із підтримуваними варіантами.
<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>
Вирівнювання
Спінери в Bootstrap побудовані за допомогою rem
s currentColor
, і display: inline-flex
. Це означає, що їх можна легко змінювати, перефарбовувати та швидко вирівнювати.
Маржа
Використовуйте утиліти полів, наприклад, .m-5
для легкого розміщення інтервалів.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Розміщення
Використовуйте утиліти flexbox , утиліти float або утиліти вирівнювання тексту , щоб розташувати прядки саме там, де вони вам потрібні в будь-якій ситуації.
Flex
<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>
Поплавці
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Вирівнювання тексту
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Розмір
Додайте .spinner-border-sm
і .spinner-grow-sm
, щоб зробити менший спінер, який можна швидко використовувати в інших компонентах.
<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>
Або використовуйте власний CSS або вбудовані стилі, щоб змінити розміри за потреби.
<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>
кнопки
Використовуйте ручки всередині кнопок, щоб вказати дію, яка зараз виконується або виконується. Ви також можете замінити текст елемента обертання та використовувати текст кнопки за потреби.
<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>