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
MixinParamètresDescription
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.

VariablePar défautTypeDescription
--hub-skeleton-bgrgba(148, 163, 184, 0.18)color Couleur de base de l'espace réservé utilisée pour les surfaces visibles du skeleton.
--hub-skeleton-highlightrgba(255, 255, 255, 0.52)color Couleur de surbrillance utilisée par le dégradé shimmer.
--hub-skeleton-radius12pxlength Rayon de bordure par défaut pour les nœuds block et line.
--hub-skeleton-gap12pxlength Espacement par défaut utilisé par les nœuds stack et grid lorsqu'il n'est pas remplacé par des modificateurs.
--hub-skeleton-animation-duration1.35stransition Durée du cycle d'animation shimmer.