Заполнители
Используйте заполнители загрузки для ваших компонентов или страниц, чтобы указать, что процесс загрузки еще идёт.
Введение
Заполнители можно использовать для улучшения восприятия вашего приложения. Они построены только с помощью HTML и CSS, а это значит, что для их создания не нужен JavaScript. Однако вам понадобится специальный JavaScript для переключения их видимости. Их внешний вид, цвет и размер можно легко настроить с помощью наших служебных классов.
Пример
В приведенном ниже примере мы берем типичный компонент карты и воссоздаем его с заполнителями, применяемыми для создания «загрузочной карты». Размер и пропорции у них одинаковы.
Заголовок карточки
Небольшой пример текста, основанного на названии карточки и составляющего основную часть содержимого карточки.
Go somewhere<divclass="card"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title">Заголовок карточки</h5><pclass="card-text">Небольшой пример текста, основанного на названии карточки и составляющего основную часть содержимого карточки.</p><ahref="#"class="btn btn-primary">Иди куда-нибудь</a></div></div><divclass="card"aria-hidden="true"><imgsrc="..."class="card-img-top"alt="..."><divclass="card-body"><h5class="card-title placeholder-glow"><spanclass="placeholder col-6"></span></h5><pclass="card-text placeholder-glow"><spanclass="placeholder col-7"></span><spanclass="placeholder col-4"></span><spanclass="placeholder col-4"></span><spanclass="placeholder col-6"></span><spanclass="placeholder col-8"></span></p><ahref="#"tabindex="-1"class="btn btn-primary disabled placeholder col-6"></a></div></div>Как это работает
Создайте заполнители с классом .placeholder и классом столбца сетки (например, .col-6), чтобы установить width. Они могут заменять текст внутри элемента или добавляться как класс-модификатор к существующему компоненту.
Мы применяем дополнительный стиль к .btn через ::before, чтобы обеспечить соблюдение высоты height. Вы можете расширить этот шаблон для других ситуаций по мере необходимости или добавить в элемент , чтобы отразить высоту, когда фактический текст отображается на его месте.
<paria-hidden="true"><spanclass="placeholder col-6"></span></p><ahref="#"class="btn btn-primary disabled placeholder col-4"aria-hidden="true"></a>aria-hidden="true" только указывает, что элемент должен быть скрыт для программ чтения с экрана. Поведение загрузки заполнителя зависит от того, как на самом деле будут использоваться стили заполнителя, как они планируют обновлять вещи и т. д. Некоторый код JavasSript может потребоваться для замены состояния заполнителя и информирования пользователей об обновлениях.
Ширина
Вы можете изменить width с помощью классов столбцов сетки, утилит ширины или встроенных стилей.
<spanclass="placeholder col-6"></span><spanclass="placeholder w-75"></span><spanclass="placeholder"style="width: 25%;"></span>Цвет
По умолчанию заполнитель placeholder использует currentColor. Это можно изменить с помощью настраиваемого цвета или служебного класса.
<spanclass="placeholder col-12"></span><spanclass="placeholder col-12 bg-primary"></span><spanclass="placeholder col-12 bg-secondary"></span><spanclass="placeholder col-12 bg-success"></span><spanclass="placeholder col-12 bg-danger"></span><spanclass="placeholder col-12 bg-warning"></span><spanclass="placeholder col-12 bg-info"></span><spanclass="placeholder col-12 bg-light"></span><spanclass="placeholder col-12 bg-dark"></span>Размеры
Размер .placeholder основывается на типографском стиле родительского элемента. Настройте их с помощью модификаторов размера: .placeholder-lg, .placeholder-sm или .placeholder-xs.
<spanclass="placeholder col-12 placeholder-lg"></span><spanclass="placeholder col-12"></span><spanclass="placeholder col-12 placeholder-sm"></span><spanclass="placeholder col-12 placeholder-xs"></span>Анимация
Анимируйте заполнители с .placeholder-glow или .placeholder-wave, чтобы лучше передать представление о том, что что-то активно загружается.
<pclass="placeholder-glow"><spanclass="placeholder col-12"></span></p><pclass="placeholder-wave"><spanclass="placeholder col-12"></span></p>Sass
Переменные
$placeholder-opacity-max:.5;$placeholder-opacity-min:.2;