Укажите состояние загрузки компонента или страницы с помощью счетчиков 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для упрощения интервалов.
Добавьте .spinner-border-smи .spinner-grow-sm, чтобы сделать меньший счетчик, который можно быстро использовать в других компонентах.
Загрузка...
Загрузка...
Или используйте собственные стили CSS или встроенные стили, чтобы изменить размеры по мере необходимости.
Загрузка...
Загрузка...
Кнопки
Используйте счетчики внутри кнопок, чтобы указать, что действие в настоящее время обрабатывается или происходит. Вы также можете заменить текст из элемента счетчика и использовать текст кнопки по мере необходимости.