Индикатор загрузки и оверлей для Angular | ng-hub-ui-loading

Компонент загрузки для Angular с индикаторами spinner, dots, bars, pulse и ring в режимах inline, overlay и fullscreen, а также сервис для блокирующих оверлеев на уровне приложения.

Последнее обновление 24 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Используйте ng-hub-ui-loading, когда раздел, контейнер или всё приложение должны показать, что идёт работа, и при этом каждому представлению не нужно собирать собственный спиннер и подложку.

Установка

npm install ng-hub-ui-loading

Перейти к

Идеально для

  • загрузка маршрутов и данных
  • оверлеи при отправке форм
  • блокирующие операции уровня приложения
  • брендированные заставки

О библиотеке loading

ng-hub-ui-loading — это standalone-компонент Angular, отрисовывающий неопределённое состояние загрузки в трёх режимах: `inline` как блок в потоке документа, `overlay` с абсолютным позиционированием поверх родительского контейнера и `fullscreen` с фиксацией во вьюпорте. В комплекте пять индикаторов на чистом CSS — spinner, dots, bars, pulse и ring — в трёх размерах, необязательное сообщение и необязательное изображение бренда с анимацией `none`, `spin` или `pulse`. `HubLoadingService` программно управляет глобальным полноэкранным оверлеем и ведёт счётчик ссылок на параллельных вызывающих, поэтому одновременные запросы никогда не снимают оверлей друг у друга. Каждый цвет, размер и длительность — это пользовательское свойство `--hub-loading-*`, дополненное Sass-миксином `hub-loading-theme()` для сплошной перестилизации; компонент доступен по умолчанию благодаря `role=status`, `aria-live=polite` и `aria-busy` и учитывает `prefers-reduced-motion`.

Руководства по возможностям

Блок inline

`inline` — режим по умолчанию, потому что ещё пустая область должна заранее резервировать место, которое займёт её содержимое: блок участвует в обычном потоке документа, поэтому при появлении настоящего содержимого ничего не подпрыгивает. `message` отрисовывается под индикатором, а всё спроецированное между тегами — под сообщением: там место для действия отмены или для пометки, что операция затянулась дольше обычного. Хост несёт `role="status"`, `aria-live="polite"` и `aria-busy="true"`, поэтому программа чтения с экрана подхватывает сообщение при его появлении, не прерывая то, что уже читает.

Примеры:
Основы блока inline

Блок inline в трёх полезных формах: только индикатор, индикатор с сообщением и сообщение с действием отмены, спроецированным снизу.

Indicator only

Loading your workspace

With a message

Importing 1,248 rows

With projected content

The block is announced as role="status" with aria-live="polite", so a screen reader reads the message when it appears without interrupting whatever is being read.

Код
Import:
Template:
Component:

Индикаторы и акценты

Библиотека несёт пять индикаторов на чистом CSS — `spinner`, `dots`, `bars`, `pulse` и `ring` — и потому не тянет за собой ни изображений, ни иконочного шрифта. Три ступени размера предустанавливают `--hub-loading-size`, но сам токен остаётся переопределяемым отдельно, если вёрстке нужен размер, которого эти ступени не покрывают. `color` — не обычный CSS-цвет: значение проходит через `resolveHubAccent()`, который читает голое имя вроде `primary` как токен дизайн-системы, следующий теме, тогда как hex, литерал `oklch()` или ссылка `var(...)` берутся как есть.

Примеры:
Варианты, размеры и акценты

Пять поставляемых индикаторов, три ступени размера и три вида, которые может принимать акцент, — семантическое имя, литерал CSS-цвета и ссылка `var(...)`.

Variants
spinner
dots
bars
pulse
ring
Sizes
size="sm"
size="md"
size="lg"

Each step is a preset for the --hub-loading-size token. Override that token directly when a layout needs a size the three steps do not cover.

Accents
color="primary"
color="success"
color="danger"
color="#7c3aed"
color="var(--hub-sys-color-warning)"

A bare name resolves to var(--hub-sys-color-<name>) and tracks the active theme. A hex, an oklch() or a var(...) is used verbatim.

Код
Import:
Template:
Component:

Overlay и fullscreen

`overlay` накрывает одну область, а не страницу. Он позиционируется абсолютно, поэтому то, что окажется накрытым, решает ближайший позиционированный предок — задайте этому контейнеру `position: relative`, иначе overlay ускользнёт вверх, к тому предку, который случайно оказался позиционированным. Такое ограничение оставляет остальной экран прокручиваемым и рабочим. `fullscreen` зафиксирован относительно viewport и именно его `HubLoadingService` монтирует в `document.body`, вне любого поддерева компонентов, так что ни `overflow`, ни контекст наложения предка не смогут его обрезать. Оба режима рисуют полупрозрачную завесу, если только `backdrop` не выключен.

Примеры:
Overlay контейнера

Overlay, запертый в одной карточке её же `position: relative`, тогда как остальная страница остаётся прокручиваемой. Переключите `backdrop`, чтобы увидеть разницу между фоновым обновлением и работой, обесценивающей то, что на экране.

Order #4821

3 items · delivered 14 Aug 2026

Subtotal
212.00 €
Shipping
9.90 €
VAT (21%)
26.70 €
Total
248.60 €

Turn the backdrop off to keep the content readable underneath — useful when the work is a background refresh rather than something that invalidates what is on screen.

Код
Import:
Template:
Component:
Сервис fullscreen

`HubLoadingService` под управлением из TypeScript. Два перекрывающихся запроса показывают, зачем нужен счётчик ссылок: первый `hide()` оставляет overlay на месте, потому что второй вызывающий всё ещё держит ссылку, а `update()` переписывает сообщение на лету.

The overlay covers the whole viewport, so this demo dismisses it for you: every request releases its own reference, and a watchdog forces a hideAll() after 5 seconds no matter what.
References held
0
isLoading()
false
Calls

Nothing yet.

Код
Import:
Template:
Component:

Брендирование и темизация

`image` заменяет встроенный индикатор вашим знаком, анимируемым через `none`, `spin` или `pulse`: `spin` читается хорошо только на радиально симметричном знаке, а `pulse` сохраняет текстовый логотип прямым и разборчивым. Всё визуальное живёт в токенах `--hub-loading-*`, объявленных на `:where(.hub-loading)`, так что задать их может любой предок — акцент, размер, скорость, толщину штриха, зазор, размер изображения, цвет текста, а также тон и размытие backdrop. Sass-миксин `hub-loading-theme()` выставляет всю лестницу токенов одним вызовом, а `provideHubLoading()` переопределяет значения по умолчанию для целого приложения, не трогая ни один шаблон.

Примеры:
Изображение бренда

Фирменный знак вместо встроенного индикатора, показанный с каждой из трёх анимаций изображения, чтобы был виден компромисс между `spin`, `pulse` и `none`.

Preparing your report

imageAnimation="none"

Preparing your report

imageAnimation="spin"

Preparing your report

imageAnimation="pulse"

Any URL works — an asset path, an imported file or, as here, an inline data URI. Size the mark with --hub-loading-image-size rather than size, which drives the built-in indicators.

Код
Import:
Template:
Component:
Темизация через CSS-переменные

Живая темизация через токены `--hub-loading-*`, заданные на элементе-обёртке, включая тон и размытие backdrop, которые работают только в режимах `overlay` и `fullscreen`.

Inline — accent, size, speed, thickness

Overlay preview

The backdrop tint and blur only apply in overlay and fullscreen modes. The tint is mixed from --hub-sys-surface-page, so it veils this text with the theme's own surface instead of a fixed colour — drop it to zero and the card stays fully legible underneath.

Refreshing

The same overrides written once, in Sass, are in the CSS tab — that is what hub-loading-theme() is for.

Код
Import:
Template:
Component:

Ключевые возможности

Последние изменения

Version 22.0.0 - 8/24/26, 12:00 AM

added: Initial release of hub-loading: one component covering the inline block, the container overlay and the fullscreen layer, with role="status", aria-live="polite" and aria-busy set on the host.

added: Five pure-CSS indicators — spinner, dots, bars, pulse and ring — in three size steps, with no image or font dependency.

added: Accent resolution through resolveHubAccent() from ng-hub-ui-utils: a bare name becomes a --hub-sys-color-* token and follows the theme, while a hex, an oklch() or a var(...) is used verbatim.

added: Optional image input with none, spin and pulse animations, replacing the built-in indicator with a brand mark.

added: HubLoadingService for the fullscreen overlay, with a reference counter so concurrent callers cannot unblock the screen out from under each other, plus update() to re-dress the live overlay and hideAll() to force the count to zero. SSR-safe: a no-op without a DOM.

added: provideHubLoading() and the HUB_LOADING_CONFIG token, supplying application-wide defaults to both the component and the service.

added: Theming through the --hub-loading-* token ladder and the hub-loading-theme() Sass mixin, shipped at ng-hub-ui-loading/styles.

Связанные библиотеки

ng-hub-ui-skeleton ng-hub-ui-metrics