ProgressBar

Present known progress or an indeterminate operation.

Category: Feedback and status
Import: @neural-ui/core/progress-bar
Selector: neu-progress-bar

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

Usage

The application supplies value from 0 to 100; the component clamps out-of-range numbers and treats non-finite values as 0. showValue adds the visible percentage. Use indeterminate when the total is unknown: numeric ARIA progress is omitted and the percentage is hidden. The component reports progress but does not run the operation or emit completion events.

Examples

Try the example and open Code to see its full implementation. Reset restores the initial demonstration state.

Try and configure

Change the options and inspect the live preview. The generated template stays next to the controls; Code contains the complete executable source.

Live preview

Value (%)

Label

Show percentage

Indeterminate

Generated template: reflects the configuration above. Open Code for the complete imports and state.

<neu-progress-bar
  [value]="40"
  label="Uploading files"
  tone="brand"
  size="md"
  [showValue]="true"
  [indeterminate]="false"
/>

Data and content

The application supplies the Inputs and owns any surrounding interaction. This component has no model bindings or Outputs. Content projection and icon templates are documented separately where supported.

Accessibility and keyboard

Provide a descriptive label, such as Uploading files, rather than an unexplained percentage. The progressbar role exposes the normalized value and range; indeterminate progress does not claim a numeric completion percentage. Announce important operation results separately, without announcing every percentage update. Reduced-motion preferences must preserve the loading indication without continuous animation.

Key	Action
`—`	No component-level keyboard interaction; projected buttons and links keep their own keyboard behavior.

API

All public Inputs are extracted from the pinned Core package. Named types link to their definitions. Only the actual public projection areas and templates are listed below.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`indeterminate`	`boolean`	`false`	`[indeterminate]`	Unknown total: animates without numeric ARIA progress or a visible percentage.
`label`	`string`	`''`	`[label]`	Visible operation label and accessible progressbar name.
`showValue`	`boolean`	`false`	`[showValue]`	Shows the normalized percentage when not indeterminate.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	`[size]`	Track height: sm=4, md=8 or lg=12 px.
`tone`	`NeuProgressTone`	`'brand'`	`[tone]`	Semantic fill color.
`value`	`number`	`0`	`[value]`	Percentage from 0 to 100; values are normalized for display and ARIA.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public Types

Open a type to inspect its definition and interface fields.

NeuProgressToneTypeScript

import type { NeuProgressTone } from '@neural-ui/core/progress-bar';

// Public declaration (reference only)
export type NeuProgressTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

Styles and tokens

size selects a 4, 8 or 12 px track. tone selects a semantic fill; labels and visible percentages use readable text tokens. Keep the bar inside a width-constrained layout and let Core handle indeterminate and reduced-motion rendering.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-error`	Invalid field or danger-action color	Shared by other Core consumers; scope the override.	`#dc2626`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-surface-3`	Hover and raised control surfaces	Shared by other Core consumers; scope the override.	`#e2e8f0`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-font-sans`	Text typography	Shared by other Core consumers; scope the override.	`'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
`--neu-radius-full`	Corner radius	Shared by other Core consumers; scope the override.	`9999px`
`--neu-success`	Inherited theme value used by this component	Shared by other Core consumers; scope the override.	`#15803d`
`--neu-text-sm`	Text size	Shared by other Core consumers; scope the override.	`0.875rem`