Componente Skeleton Loader para Angular | ng-hub-ui-skeleton
Placeholders skeleton de carga para Angular con presets reutilizables, templates DSL inline, valores responsive y variables CSS para estados shimmer.
Última actualización 17 ago 2026
Visión General
Por qué los equipos buscan esta librería
Elige esta librería skeleton para Angular cuando los estados de carga necesiten mantenerse sistemáticos, reutilizables y listos para producto en lugar de degradarse en markup shimmer aislado.
Instalación
npm install ng-hub-ui-skeletonIr a
Ideal para
- cards y feeds
- tablas de datos
- formularios
- dashboards
Sobre skeleton
ng-hub-ui-skeleton ofrece a los equipos Angular una forma estructurada de diseñar placeholders de carga: presets incluidos para patrones comunes de UI, una DSL compacta para formas personalizadas y valores responsive que adaptan el mismo skeleton a múltiples layouts.
Guías de uso
Catálogo de presets
El catálogo incluido es intencionadamente amplio porque los estados de carga suelen corresponder a UI de negocio repetida, no a placeholders aislados. Incluye 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 y empty-state-skeleton. La idea es que los equipos empiecen desde un vocabulario de carga orientado a producto en lugar de reconstruir los mismos bloques shimmer en cada funcionalidad. En la práctica, eso permite que pantallas cargadas de tabla arranquen desde `table-toolbar` más repeticiones de `table-row`, que dashboards mezclen `stat-card`, `chart-panel` y `dashboard-widget`, y que flujos de contenido usen `card`, `feed-item` o `search-result` sin escribir el layout desde cero.
Ejemplos:
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.
Código
Import:
Template:
Component:
Bundled Card Preset
Renders the built-in card skeleton with the default shimmer appearance.
Código
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
Código
Import:
Template:
Component:
Autoría con DSL compacta
Los templates inline usan una sintaxis compacta tipo Emmet porque la librería está optimizada para iterar rápido dentro de codebases Angular. La composición entre hermanos usa `+`, la anidación usa `>`, los modificadores viven entre paréntesis, las repeticiones usan `*N` y los parámetros se interpolan con `{{param}}`. Esto da a los equipos una superficie de autoría compacta que sigue leyéndose bien en pull requests y permite cambios pequeños sin reescribir un árbol de objetos completo. El punto importante no es que la sintaxis sea ingeniosa, sino que la intención de layout permanezca cerca del uso del componente y siga siendo fácil de revisar, refactorizar y comparar.
Ejemplos:
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.
Código
Import:
Template:
Component:
Inline Emmet-like Template
Defines a custom skeleton shape inline with params interpolation.
Código
Import:
Template:
Component:
Variantes y layouts responsive
Los estados de carga no deberían ignorar la densidad del layout ni los breakpoints, porque el usuario nota cuando el skeleton no tiene relación con la interfaz real. Los presets pueden exponer variantes como `compact`, y los valores de modificadores pueden cambiar entre breakpoints mediante tokens responsive compactos. Eso permite mantener una única definición semántica del skeleton mientras se adaptan anchos, número de columnas, espaciados y tamaños entre móvil, tablet y desktop. El resultado práctico es menos plantillas duplicadas y una alineación mucho mejor entre la fase de placeholder y la interfaz renderizada final.
Ejemplos:
Compact Variant
Compares the default card preset with its compact variant for denser interfaces.
Código
Import:
Template:
Component:
Responsive Table Layout
Uses responsive values inside the built-in presets to adapt from compact to wider layouts.
Código
Import:
Template:
Component:
Registro programático y theming
Los presets incluidos son el punto de partida, no el límite. Los equipos pueden registrar presets específicos del proyecto mediante inyección de dependencias en Angular y consumirlos por nombre exactamente igual que el catálogo base, algo clave cuando un producto tiene su propio lenguaje repetido de skeletons. El ajuste visual permanece en variables CSS, de modo que intensidad del shimmer, color base, color de brillo, espaciado y radio puedan alinearse con el design system en lugar de filtrarse como valores hardcodeados dentro de componentes de funcionalidad. Esta separación es importante: la estructura pertenece a presets y DSL, mientras que la política visual pertenece al theming.
Ejemplos:
Programmatic Custom Preset
Registers a local preset and consumes it by name just like the bundled catalogue.
Código
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
Código
Import:
Template:
Component:
Características clave
Cambios recientes
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.
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).
changed: Added the initial dynamic skeleton component for Angular.
changed: Added a compact Emmet-like DSL with preset composition and repeat support.
changed: Added responsive property values, variants, and programmatic preset registration.
changed: Added the first preset catalogue for cards, lists, tables, forms, dashboards, and empty states.