Заполнители

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

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

О

Заполнители можно использовать для улучшения работы вашего приложения. Они созданы только с использованием 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он соблюдается. Вы можете расширить этот шаблон для других ситуаций по мере необходимости или добавить  внутри элемента, чтобы отразить высоту, когда фактический текст отображается на его месте.

HTML

<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классы столбцов сквозной сетки, утилиты ширины или встроенные стили.

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>

Размеры

Размер .placeholders зависит от типографского стиля родительского элемента. Настройте их с помощью модификаторов размера: .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>

Сасс

Переменные

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