Composant Skeleton Loader Angular | ng-hub-ui-skeleton
Placeholders de chargement skeleton Angular avec presets réutilisables, templates DSL inline, valeurs responsive et variables CSS pour les états shimmer.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Choisissez cette bibliothèque skeleton Angular lorsque les états de chargement doivent rester systématiques, réutilisables et prêts pour le produit, plutôt que de dégénérer en balisage shimmer ponctuel.
Installation
npm install ng-hub-ui-skeletonAller à
Idéal pour
- cards et feeds
- tableaux de données
- formulaires
- tableaux de bord
À propos de skeleton
ng-hub-ui-skeleton offre aux équipes Angular une manière structurée de concevoir des placeholders de chargement : des presets fournis pour les schémas d'UI courants, une DSL compacte pour les formes personnalisées et des valeurs responsive qui adaptent le même skeleton à plusieurs mises en page.
Guides de fonctionnalités
Catalogue de presets
Le catalogue inclus est volontairement large car les états de chargement correspondent généralement à de l'UI métier répétée, et non à des placeholders isolés. Il comprend 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 et empty-state-skeleton. L'idée est de permettre aux équipes de partir d'un vocabulaire de chargement orienté production au lieu de reconstruire les mêmes blocs shimmer dans chaque fonctionnalité. En pratique, cela signifie que les écrans riches en tables peuvent partir de `table-toolbar` plus des `table-row` répétés, que les écrans dashboard peuvent mélanger `stat-card`, `chart-panel` et `dashboard-widget`, et que les flux axés sur le contenu peuvent recourir à `card`, `feed-item` ou `search-result` sans écrire un nouveau markup de layout à partir de zéro.
Exemples:
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:
Rédaction avec un DSL compact
Les templates inline utilisent une syntaxe compacte de type Emmet car la bibliothèque est optimisée pour une itération rapide au sein des codebases Angular. La composition entre frères utilise `+`, l'imbrication utilise `>`, les modificateurs vivent entre parenthèses, les répétitions utilisent `*N`, et les paramètres sont interpolés avec `{{param}}`. Cela offre aux équipes une surface de rédaction compacte qui se lit toujours bien dans les pull requests et permet de petites modifications sans réécrire un arbre d'objets complet. Le point important n'est pas l'ingéniosité de la syntaxe : c'est que l'intention de layout reste proche de l'utilisation du composant et facile à comparer, refactoriser et relire.
Exemples:
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:
Variantes et layouts responsive
Les états de chargement ne devraient pas ignorer la densité du layout ni les breakpoints, car les utilisateurs remarquent quand le skeleton n'a aucun rapport avec l'interface réelle. Les presets peuvent exposer des variantes comme `compact`, et les valeurs de modificateurs individuelles peuvent changer selon les breakpoints à l'aide de tokens responsive compacts. Cela permet de conserver une seule définition sémantique du skeleton tout en adaptant les largeurs, le nombre de colonnes, l'espacement et les tailles selon les contextes mobile, tablette et desktop. Le résultat pratique est moins de templates dupliqués et un bien meilleur alignement entre la phase de placeholder et l'interface réellement rendue.
Exemples:
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:
Enregistrement programmatique et theming
Les presets inclus sont le point de départ, pas la limite. Les équipes peuvent enregistrer des presets spécifiques au projet via l'injection de dépendances Angular puis les consommer par leur nom exactement comme le catalogue intégré, ce qui est essentiel lorsqu'un produit possède son propre langage répété de skeletons. Le réglage visuel reste dans les variables CSS, de sorte que l'intensité du shimmer, la couleur de base, la couleur de surbrillance, l'espacement et le rayon peuvent s'aligner sur le design system au lieu de laisser fuir des valeurs codées en dur dans les composants de fonctionnalité. Cette séparation est importante : la structure appartient aux presets et au DSL, tandis que la politique visuelle appartient au theming.
Exemples:
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:
Fonctionnalités clés
Changements récents
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.