Angular Skeleton Loader Component | ng-hub-ui-skeleton
Angular skeleton loading placeholders with reusable presets, inline DSL templates, responsive values and CSS variables for shimmer states.
Overview
Why teams search for this library
Choose this Angular skeleton library when loading states need to stay systematic, reusable and product-ready instead of degenerating into one-off shimmer markup.
Install
npm install ng-hub-ui-skeletonJump to
Ideal for
- cards and feeds
- data tables
- forms
- dashboards
About skeleton
ng-hub-ui-skeleton gives Angular teams a structured way to design loading placeholders: bundled presets for common UI patterns, a compact DSL for custom shapes and responsive values that adapt the same skeleton to multiple layouts.
Feature guides
Preset Catalogue
The bundled catalogue is intentionally broad because loading states are usually repeated business UI, not isolated placeholders. It includes 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 and empty-state-skeleton. The idea is to let teams start from a production-oriented loading vocabulary instead of rebuilding the same shimmer blocks in every feature. In practice, that means table-heavy screens can start from `table-toolbar` plus repeated `table-row`, dashboard screens can mix `stat-card`, `chart-panel` and `dashboard-widget`, and content-led flows can reach for `card`, `feed-item` or `search-result` without writing new layout markup from scratch.
Examples:
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.
Code
Import:
Template:
Component:
Bundled Card Preset
Renders the built-in card skeleton with the default shimmer appearance.
Code
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
Code
Import:
Template:
Component:
Compact DSL Authoring
Inline templates use a compact Emmet-like syntax because the library optimizes for fast iteration inside Angular codebases. Sibling composition uses `+`, nesting uses `>`, modifiers live inside parentheses, repeats use `*N`, and params are interpolated with `{{param}}`. That gives teams a compact authoring surface that still reads well in pull requests and allows small changes without rewriting a full object tree. The important point is not syntax cleverness: it is that layout intent stays close to the component usage and remains simple to diff, refactor and review.
Examples:
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.
Code
Import:
Template:
Component:
Inline Emmet-like Template
Defines a custom skeleton shape inline with params interpolation.
Code
Import:
Template:
Component:
Variants And Responsive Layouts
Loading states should not ignore layout density or breakpoints, because users notice when the skeleton bears no relation to the real UI. Presets can expose variants such as `compact`, and individual modifier values can switch across breakpoints using compact responsive tokens. That makes it possible to keep one semantic skeleton definition while adapting widths, column counts, spacing and sizing across mobile, tablet and desktop contexts. The practical result is fewer duplicated templates and much better alignment between the placeholder phase and the real rendered interface.
Examples:
Compact Variant
Compares the default card preset with its compact variant for denser interfaces.
Code
Import:
Template:
Component:
Responsive Table Layout
Uses responsive values inside the built-in presets to adapt from compact to wider layouts.
Code
Import:
Template:
Component:
Programmatic Registration And Theming
Bundled presets are the starting point, not the ceiling. Teams can register project-specific presets through Angular dependency injection and then consume them by name exactly like the built-in catalogue, which is critical when a product has its own repeated skeleton language. Visual tuning stays in CSS variables, so shimmer intensity, base colour, highlight colour, spacing and radius can align with the design system instead of leaking hardcoded values into feature components. This separation is important: structure belongs in presets and DSL, while visual policy belongs in theming.
Examples:
Programmatic Custom Preset
Registers a local preset and consumes it by name just like the bundled catalogue.
Code
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
Code
Import:
Template:
Component:
Key features
Recent changes
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.