Компонент Skeleton Loader для Angular | ng-hub-ui-skeleton
Skeleton-заглушки загрузки для Angular с переиспользуемыми пресетами, инлайн-шаблонами DSL, адаптивными значениями и CSS-переменными для состояний shimmer.
Обзор
Почему команды ищут эту библиотеку
Выбирайте эту библиотеку 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 0.1.0 - 4/14/26, 12:00 AM
added: Initial runtime skeleton library for Angular with bundled presets and a compact DSL parser.
added: Programmatic preset registration through dependency injection.
added: Responsive property values and compact preset variants.
added: Documentation page, overview content and live examples in the main ng-hub-ui site.