НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Скелетон

Скелетон — серая фигура на месте содержимого, пока оно загружается. Из таких фигур собирают макеты загрузки.

Стабильный Figma
ОбзорИспользованиеAPIДоступность 
<div style="display: flex; gap: var(--space-12); align-items: center">
  <tk-skeleton shape="circle" style="flex: none"></tk-skeleton>
  <div style="flex: 1"><tk-skeleton lines="2"></tk-skeleton></div>
</div>

Анатомия

Часть Что это
tk-skeleton одна фигура; скрыта от скринридеров, фокуса не получает
полоса, круг или прямоугольник серая заливка
строки при lines больше 1 — полосы друг под другом; последняя шириной 60%

Фигуры

<tk-skeleton></tk-skeleton>
<tk-skeleton lines="3"></tk-skeleton>
<tk-skeleton shape="circle"></tk-skeleton>
<tk-skeleton shape="rect" style="height: 140px"></tk-skeleton>
shape Заменяет Размер
text (по умолчанию) строку текста по окружающему шрифту, подходит к любому стилю текста
circle аватар или иконку 32px, как Avatar по умолчанию; задайте одну сторону, чтобы изменить
rect картинку, карточку, поле во всю ширину; высоту задайте в CSS
  • Размер задавайте в CSS: через style, класс или сетку и flex вокруг. Атрибутов размера нет.
  • Повторяйте настоящее содержимое: ту же сетку, промежутки, блоки и число строк. Тогда ничего не прыгнет, когда содержимое придёт.
  • lines ставит полосы текста с шагом строк шрифта и укорачивает последнюю, чтобы блок читался как абзац. Работает только с text. Чтобы задать каждой строке свою ширину, возьмите несколько отдельных полос.

Углы

У полос текста radius-4, у прямоугольников radius-8, у кругов radius-full. Чтобы повторить другие углы содержимого, задайте --tk-skeleton-radius.

<tk-skeleton shape="rect" style="height: 140px; --tk-skeleton-radius: var(--radius-12)"></tk-skeleton>
<tk-skeleton shape="rect" style="height: 32px; width: 96px; --tk-skeleton-radius: var(--radius-full)"></tk-skeleton>

Макеты

Карточка с картинкой и текстом:

<div aria-busy="true">
  <tk-skeleton shape="rect" style="height: 140px"></tk-skeleton>
  <tk-skeleton lines="3" style="margin-block-start: var(--space-12)"></tk-skeleton>
</div>
  • Список: повторите строку из начала этой страницы. Разделители и иконки строк оставьте настоящими.
  • Таблица: по одной полосе на ячейку под настоящими заголовками, с разной шириной в каждом столбце, чтобы столбцы читались.

Состояния

<tk-skeleton lines="2"></tk-skeleton>
<tk-skeleton lines="2" effect="none"></tk-skeleton>
  • pulse (по умолчанию): фигура мягко гаснет и проявляется. Фигуры, добавленные одновременно, пульсируют в такт.
  • effect="none": неподвижная заливка. Пригодится, когда на экране много фигур и пульсировать они будут все разом.
  • При сокращённой анимации все скелетоны неподвижны.