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.
Ü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 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.