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

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Блок inline

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

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

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

Overlay и fullscreen

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

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

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

Изображение бренда

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.