Элементы

Заглушка загрузки

Серые заглушки на месте содержимого: строка, абзац, круг, квадрат, блок, карточка. Мерцание отключается при prefers-reduced-motion.

skeleton с версии 0.1.0

Примеры

Строка и абзац

<div class="skeleton-text" aria-busy="true">
  <span class="visually-hidden">Загрузка</span>
  <span class="skeleton skeleton--title" aria-hidden="true"></span>
  <span class="skeleton skeleton--line" aria-hidden="true"></span>
  <span class="skeleton skeleton--line" aria-hidden="true"></span>
  <span class="skeleton skeleton--line" aria-hidden="true"></span>
</div>

Карточка участника

<div class="skeleton-card" aria-busy="true">
  <span class="visually-hidden">Загрузка списка участников</span>
  <div class="skeleton-card__head" aria-hidden="true">
    <span class="skeleton skeleton--circle"></span>
    <span class="skeleton skeleton--line"></span>
  </div>
  <span class="skeleton skeleton--box" aria-hidden="true"></span>
  <span class="skeleton skeleton--line skeleton--short" aria-hidden="true"></span>
</div>

Круг и квадрат

<div class="skeleton-card__head" aria-busy="true">
  <span class="visually-hidden">Загрузка</span>
  <span class="skeleton skeleton--circle" aria-hidden="true"></span>
  <span class="skeleton skeleton--square" aria-hidden="true"></span>
</div>

Установка

bukatchuk-ui add skeleton

Вместе с компонентом установятся: tokens, fonts, base.

Файлы

Файл	Назначение
`skeleton.css`	стили
`example.html`	образец разметки, в проект не копируется

Варианты

Класс	Назначение
`skeleton--line`
`skeleton--title`
`skeleton--short`
`skeleton--box`
`skeleton--circle`
`skeleton--square`

Переменные

Переменная	Что задаёт
`--skeleton-size`	размер круга и квадрата