La aplicación proporciona value entre 0 y 100; el componente limita los números fuera de rango y trata los valores no finitos como 0. showValue añade el porcentaje visible. Utiliza indeterminate cuando se desconoce el total: se omite el progreso numérico de ARIA y se oculta el porcentaje. El componente representa el progreso, pero no ejecuta la operación ni emite eventos de finalización.
La aplicación proporciona los Inputs y controla la interacción del entorno. Este componente no tiene modelos ni Outputs. La proyección de contenido y los templates de iconos se documentan por separado cuando existen.
Proporciona una etiqueta descriptiva, como Subiendo archivos, en lugar de un porcentaje sin explicación. El rol progressbar expone el valor normalizado y el intervalo; un progreso indeterminado no declara un porcentaje de finalización. Anuncia los resultados importantes de la operación por separado, sin anunciar cada actualización porcentual. La preferencia de movimiento reducido debe conservar la indicación de carga sin animación continua.
Tecla
Acción
—
Sin interacción de teclado propia; los botones y enlaces proyectados conservan su comportamiento de teclado.
Todos los Inputs públicos se extraen del paquete Core fijado. Los tipos con nombre enlazan con sus definiciones. Solo se enumeran las zonas de proyección y los templates públicos reales.
Inputs
Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.
Nombre
Tipo
Por defecto
Uso en el template
Descripción
indeterminate
boolean
false
[indeterminate]
Total desconocido: anima sin progreso numérico ARIA ni porcentaje visible.
label
string
''
[label]
Etiqueta visible de la operación y nombre accesible de la barra.
showValue
boolean
false
[showValue]
Muestra el porcentaje normalizado si no es indeterminado.
Porcentaje de 0 a 100; se normaliza para la vista y ARIA.
Templates
ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.
Este componente no expone proyección de contenido ni templates públicos de personalización.
Public Types
Abre un tipo para consultar su definición y los campos de sus interfaces.
NeuProgressTone.d.ts
import type { NeuProgressTone } from '@neural-ui/core/progress-bar';
// Declaración pública (solo referencia)
export type NeuProgressTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';
size selecciona una barra de 4, 8 o 12 px de alto. tone selecciona un relleno semántico; las etiquetas y porcentajes visibles utilizan tokens de texto legibles. Mantén la barra dentro de un contenedor con ancho definido y deja que Core gestione el modo indeterminado y el movimiento reducido.
Tokens específicos
Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.
Tokens compartidos utilizados
Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.
Token
Efecto aquí
Otros efectos
Valor / alternativa
--neu-error
Color del campo no válido o de la acción de peligro
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#dc2626
--neu-primary
Color de marca en controles activos y énfasis
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#007aff
--neu-surface-3
Superficies de controles destacados y al pasar el puntero
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#e2e8f0
--neu-text-muted
Etiquetas secundarias y contenido de ayuda
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
#475569
--neu-font-sans
Tipografía del texto
Compartido con otros consumidores de Core; limita el cambio a un ámbito.
