Progress Bar | Neural Native

Import

component.ts

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

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

A release, one step closer

Advance a clearly labelled local simulation through four review stages. The progress bar, percentage and completed stage descriptions update together; restart returns to the first completed stage. No files are uploaded.

View and copy the complete example

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">A release, one step closer</text><text class="product-caption">Keep progress connected to an understandable task</text></view>
    <view class="bundle-summary"><text class="bundle-kicker">NEURAL STUDIO / HANDOFF</text><text class="bundle-title">Good work, ready to share.</text><view class="product-row"><view class="product-copy"><text class="bundle-caption">Preparing the review bundle</text></view><text class="bundle-number">{{ progress() }}%</text></view><neu-progress-bar label="Bundle preparation" [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="Advance simulation" size="sm" [disabled]="progress() === 100" (pressed)="progress.update(advance)" /><neu-button label="Start again" size="sm" variant="text" (pressed)="progress.set(25)" /></view><text class="product-caption">Local progress demonstration. No files are uploaded.</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: 'Collect the essentials', detail: 'Project documents and references', complete: 'Project documents gathered' },
    { title: 'Tell the story', detail: 'Release notes and decisions', complete: 'Release notes organized' },
    { title: 'Check the details', detail: 'A final pass through the bundle', complete: 'Final details checked' },
    { title: 'Ready for review', detail: 'A clear handoff for the team', complete: 'Ready for the team to review' },
  ];
}

Semantic status

Compare completed, warning and interrupted states, then reset the interrupted value to zero.

View and copy the complete example

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="Device checks complete" [value]="100" tone="success" />
    <neu-progress-bar label="Storage used" [value]="85" tone="warning" />
    <neu-progress-bar label="Transfer interrupted" [value]="progress()" tone="danger" />
    <neu-button label="Reset interrupted progress" 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);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Progress Bar · android · native capture — **Android**Native screenshot

Progress Bar · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
value	number	0	Input	Value displayed by this presentation component, using the declared type.
max	number	100	Input	Total scale for the displayed values. MeterGroup uses the sum of item values when max is undefined.
tone	NeuTone	'brand'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.

Models

This component declares no two-way models.

Outputs

This component declares no public outputs.

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

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';