Перейти к содержимому

CoreSkeleton

Примеры использования и документация.

Заглушка на время загрузки: пользователь сразу видит форму будущей страницы — строки текста, аватары, карточки — вместо пустого экрана или прыгающего вёрсткой контента. Показывайте скелетон там, где данные приходят дольше мгновения: списки, профили, дашборды.

Технические детали: три формы через shape — text (сам задаёт height: 1em под строку текста), circle, rect; у circle/rect размеры по умолчанию не заданы — задаются uno-классами (w-…/h-…) или пропсами width/height (число → px, строка → как есть, напр. '75%'). Анимация animation: shimmer — нейтральный перелив (блик плывёт по заглушке), gradient — цветной анимированный градиент темы (пара CSS-переменных --skeleton-flow-a/-b, по умолчанию primary/secondary), pulse — пульс прозрачностью, breathe — «дыхание» масштабом, blink — жёсткое мигание, none — статичная заглушка. При prefers-reduced-motion все анимации отключаются. Заглушка помечена aria-hidden="true".

Профиль: круг + строки
Текстовый блок: строки разной ширины
Карточка: изображение + заголовок + строки
Анимации — shimmer / gradient / pulse / breathe / blink / none
gradient — цветной градиент (пара: пропы flow-a/flow-b или --skeleton-flow-a/-b)
Круги — размеры через width/height