Loader unificado con animación Lottie del logo de Nebula, barra de progreso y mensajes de estado. Diseñado para reutilizarse en todas las tablas, formularios y parámetros del sistema.
● Cerrada / Corregida Mantis #0000203 Standalone OnPush Signals
El Nebula Loader es un componente Angular standalone que muestra una animación de carga con el logo de Nebula (Lottie), acompañada opcionalmente de un mensaje de estado y una barra de progreso. Está diseñado para ser reutilizado en todas las tablas, formularios, parámetros y vistas del sistema NEBULA ERP.
El componente soporta múltiples tamaños predefinidos (desde xxs hasta full), tamaños personalizados en píxeles, temas claro/oscuro automáticos o forzados, y puede funcionar con progreso manual o simulado.
Origen: Incidencia Mantis #0000203 — "General: incorporar Icono de cargando página con el logo de nebula". Estado: cerrada / corregida.
🎬 Animación Lottie
Logo Nebula animado con versiones para tema claro y oscuro.
📊 Barra de progreso
Gradiente primary → tertiary con progreso manual o simulado.
🌗 Tema automático
Detecta .dark-theme o permite forzar el tema.
📐 Tamaños flexibles
De 12px a pantalla completa, con variantes predefinidas.
♿ Accesible
ARIA, focus trap y mensajes en vivo con aria-live.
⚡ Alto rendimiento
OnPush, signals y limpieza en OnDestroy.
Output
Tipo
Descripción
completed
void
Emitido cuando el progreso alcanza 100% (solo con simulación automática).
El componente calcula dinámicamente según size:
animationSize → ancho/alto del contenedor de animación.contentMaxWidth → ancho máximo del bloque de contenido.contentPadding → padding interior.contentGap → separación entre animación y barra de progreso.fontSize → tamaño del texto de estado.progressHeight → altura de la barra de progreso.displayMessage → mensaje según progreso (message o finishingMessage).isDarkMode → detección o aplicación del tema.import { LoaderComponent } from '@nebula/components/loader';
@Component({
imports: [LoaderComponent],
// ...
})
export class MiComponente {}
Loader estándar (progreso simulado)
<lib-loader
[show]="cargando"
message="Cargando registros..."
finishingMessage="¡Casi listo!">
</lib-loader>
Loader con progreso manual
<lib-loader
[show]="cargando"
[progress]="porcentaje"
message="Guardando cambios...">
</lib-loader>
Loader pequeño para botón / celda de tabla
<lib-loader
[show]="cargando"
size="xxs"
[showProgress]="false">
</lib-loader>
Loader de pantalla completa (overlay)
<lib-loader
[show]="cargando"
size="full"
message="Sincronizando datos...">
</lib-loader>
Loader con tema forzado
<lib-loader
[show]="cargando"
theme="dark"
message="Cargando en modo oscuro...">
</lib-loader>
Capturar evento de finalización
<lib-loader
[show]="cargando"
(completed)="onCargaCompletada()">
</lib-loader>
Use size="xxs" o size="xs" con [showProgress]="false" dentro de celdas o cabeceras que se actualizan.
Para carga inicial de una tabla completa, use size="small" o size="medium" con mensaje descriptivo.
Si la tabla está dentro de un contenedor con posición relativa, el loader se centra automáticamente.
Use size="small" para loaders embebidos en formularios.
Para operaciones de guardado con progreso conocido, use [progress] manual.
Para procesos largos, use duration para controlar la velocidad de la simulación.
<lib-loader
[show]="guardando"
[progress]="progresoGuardado"
size="small"
message="Guardando parámetros...">
El componente consume variables del sistema de diseño Material:
--md-sys-color-surface--md-sys-color-on-surface--md-sys-color-primary--md-sys-color-tertiary--md-sys-color-surface-container-highest--lib-font-family--lib-spacing-xs, --lib-spacing-sm, --lib-spacing-md, --lib-spacing-lg, --lib-spacing-xl, --lib-spacing-2xlAtención: asegúrese de que estas variables estén definidas en el tema global antes de usar el componente.
El componente detecta automáticamente la clase .dark-theme en el elemento <html>. También puede forzarse con el input theme="dark".
Las animaciones están definidas en:
NEBULA_ANIMATION_DARK (tema oscuro)NEBULA_ANIMATION_LIGHT (tema claro)Ambas tienen fr: 100, op: 300 (300 frames a 100 fps = 3 segundos de bucle). El componente las carga con lottie-web y las ajusta al contenedor con preserveAspectRatio: 'xMidYMid meet'.
aria-live="polite" en el contenedor del mensaje de estado.role="progressbar" con aria-valuenow, aria-valuemin, aria-valuemax y aria-label.aria-hidden="true" en el contenedor de la animación Lottie.cdkTrapFocus y cdkTrapFocusAutoCapture cuando el loader es de pantalla completa (size="full"), evitando que el foco salga del overlay.setTimeout después de que show cambia a true, para evitar bloqueos en la detección de cambios.setInterval con paso de 100 ms.OnDestroy y limpia la animación y el intervalo.ChangeDetectionStrategy.OnPush para minimizar ciclos de detección.untracked para evitar dependencias innecesarias.Archivo
Propósito
loader.component.ts
Lógica del componente (inputs, outputs, señales, animación, progreso).
loader.component.html
Plantilla con estructura condicional y accesibilidad.
loader.component.scss
Estilos base, variantes de tamaño y efecto glass.
nebula-animation-dark.ts
Datos Lottie para tema oscuro.
nebula-animation-light.ts
Datos Lottie para tema claro.
loader.stories.ts
Historias de Storybook para pruebas visuales.
show a una señal o propiedad que refleje el estado real de carga.size="xxs" o "xs" con [showProgress]="false" dentro de tablas y elementos compactos.completed para disparar acciones posteriores a la carga simulada.full en la misma vista; use solo uno como overlay.message y finishingMessage para dar feedback claro al usuario..lib-loader-content, .progress-track, etc.) desde fuera; use los inputs y variables CSS.[progress] en lugar de simulación.NEBULA ERP · Componente LoaderComponent Última actualización: 2026-09-30