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