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 16 sept 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:
Galería del catálogo de presets
Muestra juntos los presets incluidos para que los equipos elijan el punto de partida más cercano antes de escribir templates propios.
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:
Preset card incluido
Renderiza el skeleton de card incluido con el shimmer por defecto.
Código
Import:
Template:
Component:
Composición de dashboard
Compone varios presets para simular un dashboard de analítica durante la carga.
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:
Patrones de DSL compacta
Explica los bloques básicos de la DSL con salidas visuales para estructura, params y tokens responsive.
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:
Template inline tipo Emmet
Define una forma de skeleton propia en línea, con interpolación de params.
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:
Variante compacta
Compara el preset card por defecto con su variante compacta, para interfaces más densas.
Código
Import:
Template:
Component:
Layout de tabla responsive
Usa valores responsive dentro de los presets incluidos para adaptarse de layouts compactos a otros más anchos.
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:
Preset personalizado programático
Registra un preset local y lo consume por nombre igual que los del catálogo incluido.
Código
Import:
Template:
Component:
Composición de dashboard
Compone varios presets para simular un dashboard de analítica durante la carga.
Código
Import:
Template:
Component:
Características clave
Cambios recientes
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.
Librerías relacionadas
Preguntas frecuentes
¿Cómo se muestran esqueletos de carga en Angular?
Instala ng-hub-ui-skeleton y representa HubSkeletonComponent mientras tus datos están en camino. Tú describes la forma del marcador de posición —líneas, bloques, círculos— y él anima un brillo hasta que el contenido real lo sustituye, lo que evita que la maquetación salte cuando llegan los datos.
¿Se puede reutilizar la misma forma de esqueleto en varios componentes?
Sí. HubSkeletonPreset registra una forma con nombre una sola vez y la reutiliza allá donde aparezca esa disposición, así que el marcador de una tarjeta se define en un sitio en lugar de copiarse en cada listado y en cada detalle que dibuje una tarjeta.
¿Cómo se cambia el color o la velocidad del brillo de un esqueleto?
Cada color, radio y animación de ng-hub-ui-skeleton es una propiedad personalizada de CSS, así que lo reestilizas desde tu propia hoja en tiempo de ejecución y sigue al modo oscuro sin recompilar. HubSkeletonAppearance alterna entre el brillo de serie y un marcador estático.
¿Conviene usar un esqueleto o un spinner mientras cargan los datos?
Usa un esqueleto cuando conozcas la forma del contenido que viene, porque reserva el espacio y evita el salto de maquetación que deja un spinner. El spinner encaja mejor en esperas cortas e indeterminadas en las que la disposición resultante se desconoce.