Angular Skeleton-Loader-Komponente | ng-hub-ui-skeleton
Angular Skeleton-Ladeplatzhalter mit wiederverwendbaren Presets, Inline-DSL-Templates, responsiven Werten und CSS-Variablen für Shimmer-Zustände.
Zuletzt aktualisiert 17.08.2026
Übersicht
Warum Teams nach dieser Bibliothek suchen
Wähle diese Angular Skeleton-Bibliothek, wenn Ladezustände systematisch, wiederverwendbar und produktreif bleiben sollen, statt in einmaligem Shimmer-Markup zu enden.
Installieren
npm install ng-hub-ui-skeletonSpringen zu
Ideal für
- Cards und Feeds
- Datentabellen
- Formulare
- Dashboards
Über skeleton
ng-hub-ui-skeleton gibt Angular-Teams eine strukturierte Möglichkeit, Ladeplatzhalter zu gestalten: mitgelieferte Presets für gängige UI-Muster, eine kompakte DSL für individuelle Formen und responsive Werte, die dasselbe Skeleton an mehrere Layouts anpassen.
Funktionsleitfäden
Preset-Katalog
Der mitgelieferte Katalog ist bewusst breit angelegt, da Ladezustände in der Regel wiederkehrende Business-UI sind und keine isolierten Platzhalter. Er umfasst 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 und empty-state-skeleton. Die Idee ist, dass Teams von einem produktionsorientierten Ladevokabular ausgehen, anstatt dieselben Shimmer-Blöcke in jedem Feature neu zu bauen. In der Praxis bedeutet das, dass tabellenlastige Bildschirme von `table-toolbar` plus wiederholtem `table-row` ausgehen können, Dashboard-Bildschirme `stat-card`, `chart-panel` und `dashboard-widget` mischen können und inhaltsgetriebene Abläufe auf `card`, `feed-item` oder `search-result` zurückgreifen können, ohne neues Layout-Markup von Grund auf zu schreiben.
Beispiele:
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:
Kompakte DSL-Erstellung
Inline-Templates verwenden eine kompakte, Emmet-ähnliche Syntax, da die Bibliothek auf schnelle Iteration innerhalb von Angular-Codebasen ausgelegt ist. Die Komposition von Geschwisterelementen nutzt `+`, die Verschachtelung nutzt `>`, Modifikatoren stehen in Klammern, Wiederholungen nutzen `*N` und Parameter werden mit `{{param}}` interpoliert. Das gibt Teams eine kompakte Erstellungsoberfläche, die sich in Pull Requests weiterhin gut liest und kleine Änderungen ermöglicht, ohne einen kompletten Objektbaum neu zu schreiben. Der entscheidende Punkt ist nicht raffinierte Syntax: Es geht darum, dass die Layout-Absicht nahe an der Komponentennutzung bleibt und einfach zu vergleichen, zu refaktorieren und zu reviewen ist.
Beispiele:
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:
Varianten und responsive Layouts
Ladezustände sollten Layout-Dichte oder Breakpoints nicht ignorieren, da Nutzer bemerken, wenn das Skeleton keinen Bezug zur echten UI hat. Presets können Varianten wie `compact` bereitstellen, und einzelne Modifikatorwerte können mithilfe kompakter responsiver Tokens zwischen Breakpoints wechseln. Das ermöglicht es, eine semantische Skeleton-Definition beizubehalten, während Breiten, Spaltenanzahl, Abstände und Größen über Mobile-, Tablet- und Desktop-Kontexte hinweg angepasst werden. Das praktische Ergebnis sind weniger duplizierte Templates und eine deutlich bessere Übereinstimmung zwischen der Platzhalterphase und der tatsächlich gerenderten Oberfläche.
Beispiele:
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:
Programmatische Registrierung und Theming
Mitgelieferte Presets sind der Ausgangspunkt, nicht die Obergrenze. Teams können projektspezifische Presets über Angular Dependency Injection registrieren und sie dann namentlich genauso nutzen wie den integrierten Katalog, was entscheidend ist, wenn ein Produkt seine eigene wiederkehrende Skeleton-Sprache hat. Die visuelle Feinabstimmung bleibt in CSS-Variablen, sodass Shimmer-Intensität, Basisfarbe, Highlight-Farbe, Abstände und Radius mit dem Design-System abgestimmt werden können, statt hartkodierte Werte in Feature-Komponenten eindringen zu lassen. Diese Trennung ist wichtig: Struktur gehört in Presets und DSL, während die visuelle Gestaltung ins Theming gehört.
Beispiele:
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:
Hauptfunktionen
Letzte Änderungen
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.