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 16.09.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:
Galerie des Preset-Katalogs
Zeigt die mitgelieferten Presets nebeneinander, damit Teams den passendsten Ausgangspunkt wählen, bevor sie eigene Templates schreiben.
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:
Mitgeliefertes Card-Preset
Rendert das mitgelieferte Card-Skeleton mit dem Standard-Shimmer.
Code
Import:
Template:
Component:
Dashboard-Komposition
Kombiniert mehrere Presets, um während des Ladens ein Analytics-Dashboard nachzubilden.
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:
Kompakte DSL-Muster
Erklärt die Grundbausteine der DSL mit visuellen Ergebnissen für Struktur, Params und 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-Template im Emmet-Stil
Definiert eine eigene Skeleton-Form inline, mit Interpolation der Params.
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:
Kompakte Variante
Vergleicht das Standard-Card-Preset mit seiner kompakten Variante für dichtere Oberflächen.
Code
Import:
Template:
Component:
Responsives Tabellen-Layout
Nutzt responsive Werte in den mitgelieferten Presets, um von kompakten zu breiteren Layouts zu wechseln.
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:
Programmatisches benutzerdefiniertes Preset
Registriert ein lokales Preset und nutzt es über seinen Namen wie die des mitgelieferten Katalogs.
Code
Import:
Template:
Component:
Dashboard-Komposition
Kombiniert mehrere Presets, um während des Ladens ein Analytics-Dashboard nachzubilden.
Code
Import:
Template:
Component:
Hauptfunktionen
Letzte Änderungen
Version 22.3.2 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.3.1 - 9/7/26, 12:00 AM
fixed: Both READMEs stop presenting six internal DSL helpers as part of the API. They listed parseHubSkeletonDsl, interpolateHubSkeletonParams, resolveTemplateDsl, resolveResponsiveToken, resolveBreakpointFromWidth and resolveHubSkeletonNodes as exported, and public-api.ts has never re-exported the module that declares them, so a reader who followed the documentation and imported one got a build error. They stay internal: a layout is written as a template string and handed to the component or registered as a preset, so nothing outside the package has to call them.
Version 22.3.0 - 9/6/26, 12:00 AM
added: FUNCTIONALITIES.md now ships with the library, the same coverage table the rest of the family provides: which parts of the component, the DSL, the preset catalogue, the registry and the styling surface a live example actually demonstrates, and which are only prose. Nothing stated it before, so a reader had to open the documentation site and infer it.
changed: One preset registry is shared again instead of one per placeholder. The component listed HubSkeletonPresetRegistryService in its own providers, so every <hub-skeleton> on screen built a private instance and merged the sixteen bundled presets into a fresh Map, twenty times over on a screen with twenty placeholders, while the README described the service as the providedIn: 'root' singleton a consumer who injects it actually gets. The component now resolves the root instance, which changes where custom presets are read from: see BREAKING_CHANGES.md.
changed: Both READMEs teach the canonical ng-hub-ui-skeleton/styles entry for the theming mixin. They still reached for the deep path ng-hub-ui-skeleton/styles/mixins/skeleton-theme, which resolves but is not the entry 22.2.0 introduced and not what BREAKING_CHANGES.md, the mixin's own header and the generated mixin reference all show, so a reader comparing two sources had to guess which one was current.
fixed: The ariaLabel input is finally reachable by assistive technology. The container carried role="presentation" and aria-label at once, a conflict that costs the name whichever way a user agent resolves it, while every placeholder shape inside is aria-hidden, so nothing was left to carry the name either. A consumer setting the input, or relying on its non-empty default, got silence and had to announce the loading state from an outer element of their own. The container is now a polite role="status" region with aria-busy="true", matching ng-hub-ui-loading, and keeps the label as its accessible name.
fixed: The styles subpath the docs prescribe is now declared in the manifest exports. Since 22.2.0 the stylesheets have shipped at styles/, and both the README and BREAKING_CHANGES.md tell consumers to reach them with @use ng-hub-ui-skeleton/styles. The generated exports map declared only . and ./package.json, so anything that enforces the map, from Node subpath resolution to the Sass pkg: importer and bundlers that honour exports, refused the very import the documentation teaches. An Angular CLI build happened to survive because it resolves bare Sass specifiers through loadPaths instead, which is why the block went unnoticed. The theming entry and the skeleton-theme mixin are now declared explicitly, as the sibling libraries already do.
deprecated: HubSkeletonModule is deprecated and will be removed in 23.0.0. It imports and exports HubSkeletonComponent and provides nothing of its own, so importing the component directly is the whole migration; custom presets go through provideHubSkeletonPresets(), which never travelled through the module either. The class described itself as kept for compatibility with module-based apps but carried no @deprecated tag, so neither an editor nor the build warned anyone. See BREAKING_CHANGES.md.
Version 22.2.4 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.
Version 22.2.3 - 8/17/26, 12:00 AM
fixed: The package shipped without its licence notice. package.json declared MIT, but no LICENSE file travelled in the tarball — and MIT itself requires the copyright notice to be included in distributions. The notice ships now.
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.
Version 0.1.1 - 6/14/26, 12:00 AM
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).
Version 0.1.0 - 4/14/26, 12:00 AM
added: Added the initial dynamic skeleton component for Angular.
added: Added a compact Emmet-like DSL with preset composition and repeat support.
added: Added responsive property values, variants, and programmatic preset registration.
added: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.
Verwandte Bibliotheken
Häufig gestellte Fragen
Wie zeige ich Skeleton-Platzhalter beim Laden in Angular?
Installieren Sie ng-hub-ui-skeleton und rendern Sie HubSkeletonComponent, solange Ihre Daten unterwegs sind. Sie beschreiben die Form des Platzhalters — Linien, Blöcke, Kreise — und er animiert ein Schimmern, bis der echte Inhalt ihn ersetzt, was ein Springen des Layouts beim Eintreffen der Daten verhindert.
Kann ich dieselbe Skeleton-Form in mehreren Komponenten wiederverwenden?
Ja. HubSkeletonPreset registriert eine benannte Form einmal und verwendet sie überall dort wieder, wo dieses Layout auftaucht, sodass der Platzhalter einer Karte an einer Stelle definiert wird, statt in jede Liste und jede Detailansicht kopiert zu werden, die eine Karte zeichnet.
Wie ändere ich Farbe oder Geschwindigkeit des Skeleton-Schimmerns?
Jede Farbe, jeder Radius und jede Animation von ng-hub-ui-skeleton ist eine CSS-Custom-Property, sodass Sie das Ganze zur Laufzeit aus Ihrem eigenen Stylesheet umgestalten und es dem Dark Mode ohne Neubau folgt. HubSkeletonAppearance schaltet zwischen dem eingebauten Schimmern und einem schlichten statischen Platzhalter um.
Skeleton oder Spinner, während Daten laden?
Nehmen Sie ein Skeleton, wenn Sie die Form des kommenden Inhalts kennen, denn es reserviert den Platz und vermeidet den Layoutsprung, den ein Spinner hinterlässt. Ein Spinner passt besser zu kurzen, unbestimmten Wartezeiten, bei denen das entstehende Layout unbekannt ist.