Заполнители

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

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

О

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

Пример

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

Название карты

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

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

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

  <div class="card-body">
    <h5 class="card-title">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">Go somewhere</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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

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

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

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

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

<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

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

Ширина

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

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

Цвет

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

<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>

Размеры

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

<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, чтобы лучше передать восприятие того, что что-то активно загружается.

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

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

Сасс

Переменные

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