Справочник API

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

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

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

Имя	Тип	По умолчанию	Описание
`hub-loading · mode`	`'inline' \| 'overlay' \| 'fullscreen'`	`'inline'`	Где располагается блок. `inline` участвует в обычном потоке документа и резервирует собственное место; `overlay` позиционируется абсолютно и накрывает ближайшего позиционированного предка; `fullscreen` зафиксирован относительно viewport.
`hub-loading · variant`	`'spinner' \| 'dots' \| 'bars' \| 'pulse' \| 'ring'`	`'spinner'`	Какой индикатор на чистом CSS отрисовывать. Игнорируется, пока задан `image`, поскольку изображение заменяет встроенный индикатор.
`hub-loading · image`	`string \| null`	`null`	URL или data URI, отрисовываемый вместо встроенного индикатора, обычно фирменный знак. Размер его бокса задаётся через `--hub-loading-image-size`.
`hub-loading · imageAnimation`	`'none' \| 'spin' \| 'pulse'`	`'none'`	Движение, применяемое к `image`; бездействует, пока изображение не задано. `spin` подходит радиально симметричному знаку, `pulse` сохраняет текстовый логотип прямым и разборчивым, а `none` оставляет его неподвижным.
`hub-loading · message`	`string \| null`	`null`	Текст под индикатором и то, что живая область объявляет при появлении блока. При `null` сообщение не отрисовывается.
`hub-loading · size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ступень размера, питающая `--hub-loading-size`. Токен остаётся переопределяемым отдельно, когда вёрстке нужен размер, которого три ступени не покрывают.
`hub-loading · color`	`string \| null`	`null`	Акцент индикатора, приводимый `resolveHubAccent()` к единственному слоту `--hub-loading-accent`. Голое имя вроде `primary` разрешается в токен `--hub-sys-color-*` и следует теме; hex, литерал `oklch()` или ссылка `var(...)` берутся как есть. При `null` остаётся собственное каскадное значение токена.
`hub-loading · backdrop`	`boolean`	`true`	Рисует полупрозрачную завесу поверх накрытого содержимого. Игнорируется в режиме `inline`, который ничего не накрывает.
`hub-loading · ariaLabel`	`string`	`'Loading'`	Доступное имя, объявляемое живой областью хоста через `role="status"`.
`hub-loading · appendTo`	`string \| null`	`'body'`	CSS-селектор элемента, под который переносится индикатор `fullscreen`; при `null` или селекторе, который ничего не находит, он остаётся там, где его объявил шаблон. `inline` и `overlay` не переносятся никогда.
`hub-loading-bar · mode`	`'inline' \| 'overlay' \| 'fixed'`	`'inline'`	Где располагается полоса. `inline` участвует в обычном потоке и резервирует собственную строку, поэтому при появлении ничего не сдвигается; `overlay` позиционируется абсолютно относительно ближайшего позиционированного предка — панели навигации, которой вы задали `position: relative`; `fixed` крепит полосу к viewport на расстоянии `--hub-loading-bar-offset`.
`hub-loading-bar · placement`	`'top' \| 'bottom'`	`'top'`	К какому краю крепятся режимы `overlay` и `fixed`. Именно `bottom` подвешивает полосу под нижнюю кромку панели навигации; `inline` это значение игнорирует.
`hub-loading-bar · progress`	`number \| null \| undefined`	`undefined`	Забирает управление полосой. Без привязки она следует за `HubLoadingBarService`; число от 0 до 100 управляет ею напрямую и публикуется как `aria-valuenow`; `null` скрывает её.
`hub-loading-bar · indeterminate`	`boolean`	`false`	Гоняет фрагмент туда-обратно вместо заполнения — для работы без измеримого прогресса. Объявляемое значение при этом не публикуется, и именно так ARIA помечает индикатор с неизвестным положением.
`hub-loading-bar · glow`	`boolean`	`true`	Мягкое свечение позади ведущего края — деталь, которая читается как движение даже между двумя шагами автопродвижения.
`hub-loading-bar · color`	`string \| null`	`null`	Акцент заливки. Голое имя разрешается в токен `--hub-sys-color-*` и следует теме; hex, `oklch()` или `var(...)` берутся как есть.
`hub-loading-bar · ariaLabel`	`string`	`'Loading'`	Доступное имя для `role="progressbar"` на хосте.

События

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

Методы

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

Имя	Сигнатура	Возвращает	Описание
`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 не монтируется.
`HubLoadingBarService.start`	`start(): void`	`void`	Регистрирует одного вызывающего. Первый начинает цикл — после льготного периода, а не сразу, — остальные лишь увеличивают счётчик.
`HubLoadingBarService.complete`	`complete(): void`	`void`	Снимает одного вызывающего. Когда не остаётся ни одного, полоса доходит до 100 % и растворяется — или исчезает незамеченной, если льготный период поглотил всю операцию.
`HubLoadingBarService.completeAll`	`completeAll(): void`	`void`	Сбрасывает всех ожидающих вызывающих и завершает полосу разом. Для обработчика ошибок или для того, кто так и не уравновесил свой `start()`.
`HubLoadingBarService.set`	`set(value: number): void`	`void`	Переводит полосу к точному значению и показывает её, не дожидаясь льготного периода. Для работы с настоящим процентом; значение ограничивается диапазоном 0–100, но не потолком автопродвижения.
`HubLoadingBarService.inc`	`inc(amount?: number): void`	`void`	Продвигает полосу и показывает её. Без величины решает настроенная кривая продвижения — именно она держит неизвестное ожидание в движении, не позволяя ему дойти до конца.
`HubLoadingBarService.reset`	`reset(): void`	`void`	Отменяет всё сразу: ни анимации завершения, ни ожидающих вызывающих, ни следа на экране.
`HubLoadingBarService.progress`	`progress: Signal<number>`	`Signal<number> — the current fill, 0–100`	Текущее заполнение, 0–100. Безопасно читать при серверном рендеринге.
`HubLoadingBarService.isActive`	`isActive: Signal<boolean>`	`Signal<boolean> — true while at least one caller is waiting`	Ждёт ли ещё кто-нибудь — честный вопрос «загружается ли страница?», независимо от того, решила ли полоса показаться.
`HubLoadingBarService.isVisible`	`isVisible: Signal<boolean>`	`Signal<boolean> — true only while the bar is painted`	Нарисована ли полоса на самом деле. Ложь во время льготного периода и всё ещё истина на хвосте завершения.

Шаблоны

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

Имя	Описание	Пример
`Слот содержимого по умолчанию`	Всё спроецированное между тегами отрисовывается под сообщением — действие отмены, заметка о прогрессе или подсказка, что операция затянулась дольше обычного.	`<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' })]`
`Полоса под панелью навигации`	Размещение, давшее полосе имя. `position: relative` на панели навигации — это то, что удерживает overlay внутри неё, а `placement="bottom"` подвешивает его к нижней кромке.	`<nav class="navbar position-relative"> <hub-loading-bar mode="overlay" placement="bottom" /> </nav>`
`provideHubLoadingBarRouter`	Держит полосу ровно столько, сколько длится навигация, включая отклонённую guard-ом и завершившуюся ошибкой, — два случая, в которых вручную собранная полоса обычно и зависает.	`providers: [provideRouter(routes), provideHubLoadingBarRouter()]`
`hubLoadingBarInterceptor`	Держит полосу открытой на всё время жизни каждого HTTP-запроса. `finalize` уравновешивает её одинаково при успехе, ошибке и отмене.	`provideHttpClient(withInterceptors([hubLoadingBarInterceptor]))`
`withoutHubLoadingBar`	Выводит запрос из счётчика. Иначе опрос по таймеру держал бы полосу открытой вечно, а индикатор, который никогда не завершается, хуже, чем его отсутствие.	`this.http.get('/api/heartbeat', { context: withoutHubLoadingBar() })`
`provideHubLoadingBar`	Регистрирует значения полосы по умолчанию для всего приложения через токен `HUB_LOADING_BAR_CONFIG` — акцент, темп, льготный период, кривую продвижения, переведённую подпись.	`providers: [provideHubLoadingBar({ color: 'primary', delay: 120 })]`