Справочник API

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

Входные свойства

Настройте loading с помощью 9 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	Где располагается блок. `inline` участвует в обычном потоке документа и резервирует собственное место; `overlay` позиционируется абсолютно и накрывает ближайшего позиционированного предка; `fullscreen` зафиксирован относительно viewport.
`variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	Какой индикатор на чистом CSS отрисовывать. Игнорируется, пока задан `image`, поскольку изображение заменяет встроенный индикатор.
`image`	`string \| null`	`null`	URL или data URI, отрисовываемый вместо встроенного индикатора, обычно фирменный знак. Размер его бокса задаётся через `--hub-loading-image-size`.
`imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	Движение, применяемое к `image`; бездействует, пока изображение не задано. `spin` подходит радиально симметричному знаку, `pulse` сохраняет текстовый логотип прямым и разборчивым, а `none` оставляет его неподвижным.
`message`	`string \| null`	`null`	Текст под индикатором и то, что живая область объявляет при появлении блока. При `null` сообщение не отрисовывается.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ступень размера, питающая `--hub-loading-size`. Токен остаётся переопределяемым отдельно, когда вёрстке нужен размер, которого три ступени не покрывают.
`color`	`string \| null`	`null`	Акцент индикатора, приводимый `resolveHubAccent()` к единственному слоту `--hub-loading-accent`. Голое имя вроде `primary` разрешается в токен `--hub-sys-color-*` и следует теме; hex, литерал `oklch()` или ссылка `var(...)` берутся как есть. При `null` остаётся собственное каскадное значение токена.
`backdrop`	`boolean`	`true`	Рисует полупрозрачную завесу поверх накрытого содержимого. Игнорируется в режиме `inline`, который ничего не накрывает.
`ariaLabel`	`string`	`'Loading'`	Доступное имя, объявляемое живой областью хоста через `role="status"`.

События

События пока не задокументированы.

Методы

Управляйте loading из кода — 5 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`HubLoadingService.show`	`show(options?: HubLoadingOptions): void`	`void`	Регистрирует одного вызывающего и монтирует полноэкранный overlay, если он ещё не поднят. Поверх значений приложения по умолчанию применяются только реально переданные ключи, поэтому вложенные вызовы складываются, а не сбрасывают друг друга.
`HubLoadingService.hide`	`hide(): void`	`void`	Снимает одного вызывающего и разбирает overlay, как только не осталось ни одного. Счётчик ограничен нулём, поэтому шальной `hide()` не превратит последующий `show()` в пустую операцию.
`HubLoadingService.hideAll`	`hideAll(): void`	`void`	Разом сбрасывает всех ожидающих вызывающих и немедленно убирает overlay. Аварийный выход для обработчиков ошибок и смены маршрута, а не замена сбалансированным парам `show()` / `hide()`.
`HubLoadingService.update`	`update(options: HubLoadingOptions): void`	`void`	Переодевает живой overlay — сообщение о прогрессе, меняющееся посреди операции, смена варианта — не трогая счётчик ссылок.
`HubLoadingService.isLoading`	`isLoading: Signal<boolean>`	`Signal<boolean> — true while at least one reference is held`	Signal, истинный, пока ждёт хотя бы один вызывающий. Его безопасно читать при серверном рендеринге, где счётчик работает, но overlay не монтируется.

Шаблоны

Сделайте его своим — 2 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`Слот содержимого по умолчанию`	Всё спроецированное между тегами отрисовывается под сообщением — действие отмены, заметка о прогрессе или подсказка, что операция затянулась дольше обычного.	`<hub-loading message="Importing rows"><button type="button">Cancel</button></hub-loading>`
`provideHubLoading`	Регистрирует значения по умолчанию для всего приложения через токен `HUB_LOADING_CONFIG` — фирменное изображение, предпочитаемый вариант, переведённую подпись, — чтобы и `<hub-loading>`, и `HubLoadingService` отталкивались от них, а отдельные места вызова оставались лаконичными.	`providers: [provideHubLoading({ variant: 'ring', size: 'lg' })]`