Спиннеры
Укажите состояние загрузки компонента или страницы с помощью спиннеров Bootstrap, созданных полностью с использованием HTML, CSS и без JavaScript.
Обзор
"Спиннеры" Bootstrap можно использовать для отображения состояния загрузки в ваших проектах. Они построены только с использованием HTML и CSS, поэтому вам не нужен JavaScript. Вам, однако, понадобится использовать некоторые пользовательские парамеры JavaScript для переключения их отображения. Внешний вид, выравнивание и размеры можно легко настроить с помощью наших служебных классов.
В целях доступности каждый загрузчик содержит role="status" и вложенный <span class="sr-only">Loading...</span>.
prefers-reduced-motion. См. раздел с уменьшенным движением в нашей документации по специальным возможностям.
Спиннер с границей
Используйте спиннеры с границей для легкого индикатора загрузки.
<divclass="spinner-border"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Цвета
Спиннер с границей использует currentColor в качестве своего border-color, что означает, что Вы можете настроить цвет с помощью утилит цвета текста. Вы можете использовать любую из наших утилит цвета текста на стандартном спиннере.
<divclass="spinner-border text-primary"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-secondary"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-success"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-danger"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-warning"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-info"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-light"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-border text-dark"role="status"><spanclass="visually-hidden">Загрузка...</span></div>border-color? Каждая граница определяет transparent границу по крайней мере для одной стороны, поэтому утилиты .border-{color} переопределят это.
Увеличивающийся спиннер
Если Вам не нравится спиннер с границами, переключитесь на увеличивающийся спиннер. Хотя технически он не вращается, он постоянно растет!
<divclass="spinner-grow"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Опять же, этот спиннер построен с помощью currentColor, так что Вы можете легко изменить его внешний вид с помощью утилит цвета текста. Здесь он выделен синим цветом вместе с поддерживаемыми вариантами.
<divclass="spinner-grow text-primary"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-secondary"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-success"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-danger"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-warning"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-info"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-light"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow text-dark"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Выравнивание
Спиннеры в Bootstrap построены с помощью rem, currentColor и display: inline-flex. Это означает, что их можно легко изменить размер, перекрасить и быстро выровнять.
Отступы
Используйте утилиты полей, например, .m-5, чтобы упростить интервалы.
<divclass="spinner-border m-5"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Размещение
Используйте flexbox утилиты, float утилиты или утилиты выравнивание текста для размещения спиннеров именно там, где они вам нужны в любой ситуации.
Flex
<divclass="d-flex justify-content-center"><divclass="spinner-border"role="status"><spanclass="visually-hidden">Загрузка...</span></div></div><divclass="d-flex align-items-center"><strong>Загрузка...</strong><divclass="spinner-border ms-auto"role="status"aria-hidden="true"></div></div>Floats
<divclass="clearfix"><divclass="spinner-border float-end"role="status"><spanclass="visually-hidden">Загрузка...</span></div></div>Выравнивание текста
<divclass="text-center"><divclass="spinner-border"role="status"><spanclass="visually-hidden">Загрузка...</span></div></div>Размер
Добавьте .spinner-border-sm и .spinner-grow-sm, чтобы получить счетчик меньшего размера, который можно быстро использовать в других компонентах.
<divclass="spinner-border spinner-border-sm"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow spinner-grow-sm"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Или используйте собственный CSS или встроенные стили, чтобы изменить размеры по мере необходимости.
<divclass="spinner-border"style="width: 3rem; height: 3rem;"role="status"><spanclass="visually-hidden">Загрузка...</span></div><divclass="spinner-grow"style="width: 3rem; height: 3rem;"role="status"><spanclass="visually-hidden">Загрузка...</span></div>Кнопки
Используйте счетчики внутри кнопок, чтобы указать, что действие в настоящее время обрабатывается или выполняется. Вы также можете поменять местами текст из элемента счетчика и использовать текст кнопки по мере необходимости.
<buttonclass="btn btn-primary"type="button"disabled><spanclass="spinner-border spinner-border-sm"role="status"aria-hidden="true"></span><spanclass="visually-hidden">Загрузка...</span></button><buttonclass="btn btn-primary"type="button"disabled><spanclass="spinner-border spinner-border-sm"role="status"aria-hidden="true"></span> Загрузка...
</button><buttonclass="btn btn-primary"type="button"disabled><spanclass="spinner-grow spinner-grow-sm"role="status"aria-hidden="true"></span><spanclass="visually-hidden">Загрузка...</span></button><buttonclass="btn btn-primary"type="button"disabled><spanclass="spinner-grow spinner-grow-sm"role="status"aria-hidden="true"></span> Загрузка...
</button>CSS
Переменные
Добавлено в версии 5.2.0Как часть развивающегося подхода Bootstrap к переменным CSS, спиннеры теперь используют локальные переменные CSS в .spinner-border и .spinner-grow для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.
Переменные границ спиннера:
--#{$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;Переменные растущего спиннера:
--#{$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;Для обоих спиннеров используются небольшие классы модификаторов спинера для обновления значений этих переменных CSS по мере необходимости. Например, класс .spinner-border-sm делает следующее:
--#{$prefix}spinner-width:#{$spinner-width-sm};--#{$prefix}spinner-height:#{$spinner-height-sm};--#{$prefix}spinner-border-width:#{$spinner-border-width-sm};Переменные Sass
$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;Ключевые кадры
Используется для создания анимации CSS для наших спиннеров. Включен в scss/_spinners.scss.
@keyframesspinner-border{to{transform:rotate(360deg)#{"/* rtl:ignore */"};}}@keyframesspinner-grow{0%{transform:scale(0);}50%{opacity:1;transform:none;}}