Компонент Skeleton Loader для Angular | ng-hub-ui-skeleton

Skeleton-заглушки загрузки для Angular с переиспользуемыми пресетами, инлайн-шаблонами DSL, адаптивными значениями и CSS-переменными для состояний shimmer.

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

Обзор

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

Выбирайте эту библиотеку skeleton для Angular, когда состояния загрузки должны оставаться системными, переиспользуемыми и готовыми к продукту, а не вырождаться в разовую shimmer-разметку.

Установка

npm install ng-hub-ui-skeleton

Перейти к

Идеально для

  • карточки и ленты
  • таблицы данных
  • формы
  • дашборды

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

ng-hub-ui-skeleton даёт командам Angular структурированный способ проектировать заглушки загрузки: встроенные пресеты для распространённых UI-паттернов, компактную DSL для пользовательских форм и адаптивные значения, которые адаптируют один и тот же skeleton к разным компоновкам.

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

Каталог presets

Встроенный каталог намеренно сделан широким, потому что состояния загрузки обычно представляют собой повторяющийся бизнес-UI, а не изолированные заглушки. Он включает card, list-item, table-row, detail-view, form-section, dashboard-widget, stat-card, chart-panel, profile-summary, master-detail, kanban-card, feed-item, search-result, table-toolbar, filter-bar и empty-state-skeleton. Идея в том, чтобы команды начинали с ориентированного на продакшен словаря загрузки, а не пересобирали одни и те же shimmer-блоки в каждой функции. На практике это значит, что экраны с большим количеством таблиц могут начинаться с `table-toolbar` плюс повторяющийся `table-row`, экраны dashboard могут сочетать `stat-card`, `chart-panel` и `dashboard-widget`, а контентные потоки могут обращаться к `card`, `feed-item` или `search-result`, не создавая новую разметку раскладки с нуля.

Примеры:
Preset Catalogue Gallery

Shows the bundled presets together so teams can choose the closest starting point before authoring custom templates.

card

Content card with media, title and body lines.

list-item

Compact row with avatar and text.

table-row

Tabular data row placeholder.

detail-view

Detail screen with media and metadata.

form-section

Form group with responsive fields.

dashboard-widget

Panel with chart or metric content.

stat-card

Quick KPI summary card.

chart-panel

Large chart region with legend rows.

profile-summary

Profile hero with avatar and stats.

master-detail

List and detail layout together.

kanban-card

Small board card loading state.

feed-item

Activity or timeline row.

search-result

Search result with metadata lines.

table-toolbar

Toolbar with title, filters and actions.

filter-bar

Row of filter controls.

empty-state-skeleton

Illustrative empty or onboarding state.

card

Dense card variant for tighter layouts.

Код
Import:
Template:
Component:
Bundled Card Preset

Renders the built-in card skeleton with the default shimmer appearance.

Код
Import:
Template:
Component:
Dashboard Composition

Composes several presets to mock an analytics dashboard during loading.

Код
Import:
Template:
Component:

Написание на компактном DSL

Inline-шаблоны используют компактный синтаксис в стиле Emmet, потому что библиотека оптимизирована для быстрой итерации внутри кодовых баз Angular. Композиция соседних элементов использует `+`, вложенность — `>`, модификаторы находятся внутри скобок, повторы используют `*N`, а параметры интерполируются через `{{param}}`. Это даёт командам компактную поверхность для написания, которая по-прежнему хорошо читается в pull request и позволяет вносить небольшие изменения без переписывания целого дерева объектов. Важна не изощрённость синтаксиса, а то, что замысел раскладки остаётся близко к использованию компонента и его легко сравнивать, рефакторить и проверять.

Примеры:
Compact DSL Patterns

Explains the core DSL building blocks with visual outputs for structure, params and responsive tokens.

Structure

`+` creates siblings and `>` nests children.

Params & repeats

Use {{param}} placeholders and *N repeaters to scale rows quickly.

Responsive values

Switch spacing or columns inline with compact breakpoint tokens.

Код
Import:
Template:
Component:
Inline Emmet-like Template

Defines a custom skeleton shape inline with params interpolation.

Код
Import:
Template:
Component:

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

Состояния загрузки не должны игнорировать плотность раскладки или breakpoints, потому что пользователи замечают, когда skeleton не имеет отношения к реальному UI. Presets могут предоставлять варианты, такие как `compact`, а отдельные значения модификаторов могут переключаться между breakpoints с помощью компактных адаптивных токенов. Это позволяет сохранять одно семантическое определение skeleton, адаптируя ширину, количество столбцов, отступы и размеры в контекстах mobile, tablet и desktop. Практический результат — меньше дублирующихся шаблонов и гораздо лучшее соответствие между фазой заглушки и реально отрисованным интерфейсом.

Примеры:
Compact Variant

Compares the default card preset with its compact variant for denser interfaces.

Код
Import:
Template:
Component:
Responsive Table Layout

Uses responsive values inside the built-in presets to adapt from compact to wider layouts.

Код
Import:
Template:
Component:

Программная регистрация и темизация

Встроенные пресеты — это отправная точка, а не потолок. Команды могут регистрировать собственные пресеты проекта через внедрение зависимостей Angular и затем использовать их по имени точно так же, как встроенный каталог, что критично, когда у продукта есть собственный повторяющийся язык skeleton-ов. Визуальная настройка остаётся в CSS-переменных, поэтому интенсивность shimmer, базовый цвет, цвет подсветки, отступы и радиусы можно согласовать с design system, не допуская утечки жёстко заданных значений в компоненты функциональности. Это разделение важно: структура относится к пресетам и DSL, а визуальная политика — к темизации.

Примеры:
Programmatic Custom Preset

Registers a local preset and consumes it by name just like the bundled catalogue.

Код
Import:
Template:
Component:
Dashboard Composition

Composes several presets to mock an analytics dashboard during loading.

Код
Import:
Template:
Component:

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

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

Version 22.2.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.2.1 - 7/28/26, 12:00 AM

added: Comprehensive test suite for the skeleton DSL parser and preset registry: full grammar coverage (node types, nesting, siblings, props, variants, multipliers, responsive tokens), every parser error path with its exact message, preset expansion/override/variant resolution, and component render round-trips. No runtime changes.

Version 22.2.0 - 7/7/26, 12:00 AM

changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-skeleton/styles. The theme mixin now builds to dist/skeleton/styles/... (was dist/skeleton/src/lib/styles/...), so @use 'ng-hub-ui-skeleton/styles' resolves. Update any @use that reached into src/lib/styles.

Version 22.1.0 - 6/24/26, 12:00 AM

added: New hub-skeleton-theme() Sass mixin (styles/mixins/skeleton-theme) — theme the loading placeholders in one call: base / highlight surfaces (the shimmer gradient), corner radius, node gap and shimmer speed. Every parameter is optional and defaults to null, so only the ones you pass are emitted as --hub-skeleton-* overrides. Token-based, no Bootstrap dependency. (A skeleton is a neutral placeholder — there is no semantic colour variant; per-node sizes still come from the template DSL / presets.) The five theming tokens (--hub-skeleton-bg / -highlight / -radius / -gap / -animation-duration) are now documented in the design-token reference.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: Aligned with Angular 22.

changed: README documentation standardized.

changed: Replaced the deprecated ngStyle directive with the native [style] binding (Angular soft-deprecated ngStyle/ngClass in November 2024 in favour of native bindings, for better performance and smaller bundles).

changed: Added the initial dynamic skeleton component for Angular.

changed: Added a compact Emmet-like DSL with preset composition and repeat support.

changed: Added responsive property values, variants, and programmatic preset registration.

changed: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.

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

ng-hub-ui-paginable ng-hub-ui-board ng-hub-ui-portal