Заполнители

Используйте заполнители загрузки для ваших компонентов или страниц, чтобы указать, что процесс загрузки еще идёт.

На этой странице

Введение

Заполнители можно использовать для улучшения восприятия вашего приложения. Они построены только с помощью HTML и CSS, а это значит, что для их создания не нужен JavaScript. Однако вам понадобится специальный JavaScript для переключения их видимости. Их внешний вид, цвет и размер можно легко настроить с помощью наших служебных классов.

Пример

В приведенном ниже примере мы берем типичный компонент карты и воссоздаем его с заполнителями, применяемыми для создания «загрузочной карты». Размер и пропорции у них одинаковы.

Заголовок карточки

Небольшой пример текста, основанного на названии карточки и составляющего основную часть содержимого карточки.

Иди куда-нибудь

<div class="card">
  <img src="..." class="card-img-top" alt="...">

  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Небольшой пример текста, основанного на названии карточки и составляющего основную часть содержимого карточки.</p>
    <a href="#" class="btn btn-primary">Иди куда-нибудь</a>
  </div>
</div>

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

Как это работает

Создайте заполнители с классом .placeholder и классом столбца сетки (например, .col-6), чтобы установить width. Они могут заменять текст внутри элемента или добавляться как класс-модификатор к существующему компоненту.

Мы применяем дополнительный стиль к .btn через ::before, чтобы обеспечить соблюдение высоты height. Вы можете расширить этот шаблон для других ситуаций по мере необходимости или добавить в элемент  , чтобы отразить высоту, когда фактический текст отображается на его месте.

html

<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>

Использование aria-hidden="true" только указывает на то, что элемент должен быть скрыт для программ чтения с экрана. Поведение загрузки заполнителя зависит от того, как авторы на самом деле будут использовать стили заполнителя, как они планируют обновлять вещи и т. д. Некоторый код JavasSript может потребоваться для замены состояния заполнителя и информирования пользователей AT об обновлении.

Ширина

Вы можете изменить width с помощью классов столбцов сетки, утилит ширины или встроенных стилей.

html

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Цвет

По умолчанию заполнитель placeholder использует currentColor. Это можно изменить с помощью настраиваемого цвета или служебного класса.

html

<span class="placeholder col-12"></span>

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

Размеры

Размер .placeholder основывается на типографском стиле родительского элемента. Настройте их с помощью модификаторов размера: .placeholder-lg, .placeholder-sm или .placeholder-xs.

html

<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>

Анимация

Анимируйте заполнители с .placeholder-glow или .placeholder-wave, чтобы лучше передать представление о том, что что-то активно загружается.

html

<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>

<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>

CSS

Sass переменные

scss/_variables.scss

$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;