Генератор skeleton loading (CSS)
Выберите шаблон и цвета. Скелетон повторяет форму содержимого, которое появится, и ожидание кажется короче, чем с вращающимся значком.
Как пользоватьсяСкелетон, пока страница загружается
Доступно на: 
Генератор skeleton loading (CSS): для чего нужен
Skeleton screen — это серый скелет, который появляется на месте содержимого, пока оно загружается, как в соцсетях и на видеохостингах. Он показывает форму того, что появится, делает ожидание короче и не даёт странице прыгать при появлении содержимого.
Выберите шаблон (карточка с изображением, список с аватаром, профиль или абзац), число повторов, цвета и скругление. Анимированный блик двигает только фон и отключается для тех, кто просит меньше движения, а блок использует aria-busy с текстом загрузки для скринридеров.
Как пользоваться
- Выберите шаблон и число повторов.
- Настройте цвета, скругление и блик.
- Скопируйте код и замените содержимым, когда оно придёт.
Когда использовать
- Список товаров, загружаемый по API.
- Лента или список комментариев.
- Панели и веб-системы.
Частые вопросы
Почему скелетон, а не значок загрузки?
Скелетон показывает форму того, что появится, поэтому страница не прыгает при появлении содержимого, а ожидание кажется короче. Лучше работает для карточек, списков и профилей; для быстрых действий, например отправки формы, достаточно индикатора на самой кнопке.
Как это выглядит для тех, кто пользуется скринридером?
Блок получает aria-busy=true и скрытый текст «Загрузка»; прямоугольники декоративные (aria-hidden). Когда содержимое придёт, замените скелетон содержимым и уберите aria-busy.
Тяжела ли анимированная подсветка?
Нет: анимация двигает только фон каждого прямоугольника. Для тех, кто настроил в системе снижение движения, блик отключается и остаётся только цвет.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.