Progress Bar | Neural Native

Importación

component.ts

import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Un lanzamiento, un paso más cerca

Avanza una simulación local identificada por cuatro fases de revisión. La barra, el porcentaje y las descripciones completadas se actualizan a la vez; reiniciar vuelve a la primera fase completada. No se suben archivos.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuProgressBarComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Un lanzamiento, un paso más cerca</text><text class="product-caption">Relaciona el progreso con una tarea comprensible</text></view>
    <view class="bundle-summary"><text class="bundle-kicker">NEURAL STUDIO / ENTREGA</text><text class="bundle-title">Buen trabajo, listo para compartir.</text><view class="product-row"><view class="product-copy"><text class="bundle-caption">Preparando el paquete de revisión</text></view><text class="bundle-number">{{ progress() }}%</text></view><neu-progress-bar label="Preparación del paquete" [value]="progress()" [max]="100" /></view>
    <view class="bundle-stages">@for (stage of stages; track stage.title; let index = $index) { <view class="bundle-stage"><view class="stage-number" [class.stage-complete]="progress() >= (index + 1) * 25"><text class="stage-number-text" [class.stage-number-complete]="progress() >= (index + 1) * 25">{{ index + 1 }}</text></view><view class="product-copy"><text class="product-heading">{{ stage.title }}</text><text class="product-caption">{{ progress() >= (index + 1) * 25 ? stage.complete : stage.detail }}</text></view></view> }</view>
    <view class="product-actions"><neu-button label="Avanzar simulación" size="sm" [disabled]="progress() === 100" (pressed)="progress.update(advance)" /><neu-button label="Empezar de nuevo" size="sm" variant="text" (pressed)="progress.set(25)" /></view><text class="product-caption">Demostración local de progreso. No se suben archivos.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.bundle-summary { gap: 18px; padding: 22px; border-radius: 20px; background-color: #132e57; --neu-text: #f7faff; --neu-muted: #c6d8f0; --neu-border: #36557c; }
.bundle-kicker { color: #b9d6ff; font-size: 10px; line-height: 16px; letter-spacing: 1px; font-weight: 600; }
.bundle-title { color: #ffffff; font-size: 30px; line-height: 36px; font-weight: 600; }
.bundle-caption { color: #c6d8f0; font-size: 13px; line-height: 19px; }
.bundle-number { color: #c4f4df; font-size: 34px; line-height: 40px; font-weight: 600; }
.bundle-stages { gap: 20px; padding: 2px; }
.bundle-stage { flex-direction: row; gap: 14px; align-items: center; }
.stage-number { width: 36px; height: 36px; border-radius: 18px; align-items: center; justify-content: center; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.stage-complete { background-color: #d9f1e6; border-color: #d9f1e6; }
.stage-number-text { color: var(--neu-muted, #596477); font-size: 13px; font-weight: 600; }
.stage-number-complete { color: #1b624a; }
  `,
})
export class ExampleComponent {
  readonly progress = signal(25);
  readonly advance = (value: number) => Math.min(100, value + 25);
  readonly stages = [
    { title: 'Reunir lo esencial', detail: 'Documentos y referencias del proyecto', complete: 'Documentos del proyecto reunidos' },
    { title: 'Contar la historia', detail: 'Notas del lanzamiento y decisiones', complete: 'Notas del lanzamiento organizadas' },
    { title: 'Revisar los detalles', detail: 'Una última revisión del paquete', complete: 'Últimos detalles revisados' },
    { title: 'Listo para revisión', detail: 'Una entrega clara para el equipo', complete: 'Listo para que lo revise el equipo' },
  ];
}

Estados semánticos

Compara los estados completado, aviso e interrupción y restablece el valor interrumpido a cero.

Ver y copiar el ejemplo completo

semantic-status.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuProgressBarComponent } from '@neural-ui/native/progress-bar';
import { View, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuProgressBarComponent, View, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-progress-bar label="Comprobaciones de dispositivos completadas" [value]="100" tone="success" />
    <neu-progress-bar label="Almacenamiento utilizado" [value]="85" tone="warning" />
    <neu-progress-bar label="Transferencia interrumpida" [value]="progress()" tone="danger" />
    <neu-button label="Restablecer el progreso interrumpido" size="sm" variant="text" [disabled]="progress() === 0" (pressed)="progress.set(0)" />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly progress = signal(35);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Progress Bar · android · native capture — **Android**Captura nativa

Progress Bar · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
label	string	Obligatorio	Input	Nombre legible del control, acción o grupo.
value	number	0	Input	Valor mostrado por este componente de presentación, según el tipo declarado.
max	number	100	Input	Escala total de los valores. MeterGroup utiliza la suma de los valores cuando max es undefined.
tone	NeuTone	'brand'	Input	Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color.

Models

Este componente no declara models bidireccionales.

Outputs

Este componente no declara outputs públicos.

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';