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.
Ejemplos interactivos
Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.
Preset card incluido
Galería del catálogo de presets
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.
Template inline tipo Emmet
Patrones de DSL compacta
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.
Preset personalizado programático
Layout de tabla responsive
Variante compacta
Composición de dashboard