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.
Styles
Mixins et styles
Override the `--hub-skeleton-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-skeleton-theme
| Mixin | Paramètres | Description |
|---|---|---|
| Theming | ||
hub-skeleton-theme() | $bg--hub-skeleton-bg$highlight--hub-skeleton-highlight$radius--hub-skeleton-radius$gap--hub-skeleton-gap$animation-duration--hub-skeleton-animation-duration | One-call theming for `<hub-skeleton>` |
Variables CSS
Personnalisez chaque pixel avec 5 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Skeleton
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-skeleton-bg | rgba(148, 163, 184, 0.18) | color | Couleur de base de l'espace réservé utilisée pour les surfaces visibles du skeleton. |
--hub-skeleton-highlight | rgba(255, 255, 255, 0.52) | color | Couleur de surbrillance utilisée par le dégradé shimmer. |
--hub-skeleton-radius | 12px | length | Rayon de bordure par défaut pour les nœuds block et line. |
--hub-skeleton-gap | 12px | length | Espacement par défaut utilisé par les nœuds stack et grid lorsqu'il n'est pas remplacé par des modificateurs. |
--hub-skeleton-animation-duration | 1.35s | transition | Durée du cycle d'animation shimmer. |