Добавлено в v5.1 Просмотреть на GitHub

Заполнители

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

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

О заполнителях

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

Пример

В примере ниже мы берем типичный компонент карточки и воссоздаем его с применением заполнителей для создания "загружающейся карточки". Размер и пропорции одинаковы между ними.

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

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

  <div class="card-body">
    <h5 class="card-title">Заголовок карточки</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</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" только указывает, что элемент должен быть скрыт от программ чтения экрана. Поведение загрузки заполнителя зависит от того, как авторы будут фактически использовать стили заполнителя, как они планируют обновлять вещи и т.д. Некоторый код JavaScript может потребоваться для переключения состояния заполнителя и информирования пользователей 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;