Индикаторы загрузки (Loading)

XPopup предоставляет несколько встроенных типов индикаторов загрузки и позволяет использовать кастомные CSS-анимации. Также поддерживаются заглушки (skeleton screens), которые создают иллюзию мгновенного открытия.

Как работают примеры: для демонстрации лоадеров используется опция minLoadingTimeout: 2000, которая удерживает попап в состоянии загрузки минимум 2 секунды, даже если контент уже готов. В реальном приложении эта задержка определяется временем ответа сервера.

Встроенные типы лоадеров

Опция loader управляет внешним лоадером (при первом открытии попапа). Допустимые значения: 'default', 'circle', 'line', 'pulse', 'none', или произвольный CSS-класс.

default (стандартный) #

Стандартный спиннер через SVG-изображение. Используется по умолчанию (когда loader: null).

circle (вращающийся круг) #

Вращающийся круг на чистом CSS. Цвет наследуется через currentColor.

line (бегущая полоса) #

Горизонтальная полоса, похожая на индикатор загрузки YouTube.

pulse (пульсирующая точка) #

Минималистичная пульсирующая точка. Занимает минимум места.

none (без индикации) #

Полное отключение индикатора загрузки. Пользователь не видит ничего, пока контент не загрузится.

Кастомный лоадер

Вы можете создать любой лоадер, определив CSS-класс с анимацией, и передать его имя в опцию loader. XPopup добавит ваш класс к элементу .b-xpopup-loader__spinner.

Кастомный лоадер: сердце ❤️ #

Пример полностью кастомного лоадера на CSS. Никаких изображений — только псевдоэлемент ::before с эмодзи и анимация.

Раздельные лоадеры: loader и loaderIn

loader — при первом открытии попапа (на весь экран).
loaderIn — при обновлении контента внутри уже открытого окна.
Если loaderIn не указан (null), используется значение loader.

Разные лоадеры для открытия и обновления #

Первое открытие — loader: 'circle' (круг).
Обновление контента — loaderIn: 'line' (полоса).

Placeholder (заглушка / skeleton screen)

Опция loaderPlaceholder принимает CSS-селектор скрытого элемента, содержимое которого показывается вместо лоадера. В сочетании с minLoadingTimeout это создаёт иллюзию мгновенного открытия — пользователь сразу видит структуру окна, а через заданное время появляется реальный контент.

Skeleton screen (заглушка диалога) #

Сценарий: пользователь нажимает кнопку «Открыть диалог». Вместо спиннера он сразу видит структуру диалога (серые полоски-скелетоны). Через 3 секунды контент подгружается и заменяет заглушку — никакого спиннера!

Как это работает:

Создаётся скрытый элемент #skeleton-placeholder с вёрсткой заглушки
В опциях передаётся loaderPlaceholder: '#skeleton-placeholder' и minLoadingTimeout: 3000
XPopup показывает содержимое заглушки вместо лоадера на 3 секунды
По истечении времени заглушка заменяется реальным контентом

Сводная таблица опций

Опция	Тип	По умолчанию	Описание
`loader`	string\|null	`null`	Тип внешнего лоадера (при первом открытии). Встроенные: `'default'`, `'circle'`, `'line'`, `'pulse'`, `'none'`. Произвольная строка — CSS-класс кастомного лоадера. `null` — используется `'default'`.
`loaderIn`	string\|null	`null`	Тип внутреннего лоадера (при обновлении контента). Формат такой же как у `loader`. `null` — используется значение `loader`.
`loaderPlaceholder`	string\|null	`null`	CSS-селектор скрытого элемента-заглушки. Если указан, вместо лоадера показывается содержимое этого элемента. После загрузки контента заглушка автоматически заменяется.
`minLoadingTimeout`	number\|null	`null`	Минимальное время (мс), которое попап проведёт в состоянии загрузки. Если контент загрузился быстрее, статус `ready` будет отложен. `null` — без задержки (определяется скоростью загрузки). Полезно для демонстрации лоадеров и skeleton screens.

Как создать свой лоадер

Определите CSS-класс с анимацией (например, .my-spinner)
Стилизуйте его: размеры, цвета, ключевые кадры
Передайте имя класса в опцию loader

XPopup добавит ваш класс к элементу .b-xpopup-loader__spinner. Элемент уже отцентрирован абсолютным позиционированием, поэтому вам нужно задать только размеры и анимацию.