FEEDBACKBETA

ProgressBar

Accessible linear progress with determinate, buffered and indeterminate states, semantic color, reduced-motion safety and complete visual ownership.

Clamped rangesARIA progressbarHeadless ready

GET STARTED

Import

Import the standalone component from its granular entry point.

import {
  NeuralProgressBar,
  type NeuralProgressBarClasses,
} from '@neural-ng/core/progress-bar';

@Component({ imports: [NeuralProgressBar] })

Interactive progress

The value is clamped to its declared range while its visual label and assistive semantics remain synchronized.

Semantic severities

Every semantic severity consumes the shared NeuralNg color contract and follows runtime primary changes.

Sizes and variants

Size, label visibility, rounded geometry and striped motion are independent choices.

Buffered progress

A secondary layer communicates prepared work and can never render behind the current value.

Indeterminate progress

Unknown completion intentionally omits numeric ARIA attributes. Reduced-motion preferences stop the animation automatically.

Custom range and labels

Visual text and the assistive value description can express the same state at different levels of detail.

Unstyled and typed slots

Structural sizing and progress semantics remain while Tailwind owns every visible choice.

ACCESSIBILITY

Progress with meaning

Visual progress and the accessibility tree share the same normalized source of truth.

Progress semantics

Determinate mode exposes role="progressbar", aria-valuemin, aria-valuemax and the clamped aria-valuenow.

Accessible names

Give every bar either ariaLabel or ariaLabelledBy. The visible percentage alone is intentionally hidden from assistive technology.

Value descriptions

ariaValueText supports localized or domain-specific descriptions. Without it, the computed visual label becomes the accessible value text.

Unknown progress

Indeterminate mode omits min, max and current numeric attributes because publishing invented completion data would be misleading.

Reduced motion

Value transitions, stripes and indeterminate movement stop under prefers-reduced-motion: reduce.

SSR and hydration

Normalization is deterministic and browser-global free, producing identical server and client markup.

PUBLIC CONTRACT

ProgressBar API

Signal inputs only; progress is a presentational projection and emits no synthetic state.

Inputs

Input	Type	Default	Purpose
value	number	0	Current determinate value.
min	number	0	Lower range boundary.
max	number	100	Upper range boundary.
bufferValue	number \| null	null	Prepared progress rendered behind the current value.
mode	'determinate' \| 'indeterminate'	'determinate'	Known or unknown completion mode.
size	'small' \| 'medium' \| 'large'	'medium'	Track and label preset.
severity	NeuralProgressBarSeverity	'info'	Semantic value color.
rounded	boolean	true	Uses rounded track geometry.
striped	boolean	false	Adds a striped value surface.
animated	boolean	false	Animates stripes when striped is enabled.
showValue	boolean	true	Controls the visual label without removing semantics.
label	string \| null	null	Explicit visual value label.
ariaLabel	string \| null	null	Direct accessible name.
ariaLabelledBy	string \| null	null	Visible accessible-name reference.
ariaValueText	string \| null	computed label	Localized or descriptive accessible value.
unstyled	boolean	false	Removes NeuralNg visual classes.
progressClass	string	''	Additive root classes.
classes	NeuralProgressBarClasses	{}	Typed root, track, buffer, value and label slots.

Typed class slots

root

Semantic progressbar element.

track

Clipping track surface.

buffer

Optional prepared-progress layer.

value

Current or indeterminate value layer.

label

Visible value text.

Public types

NeuralProgressBarMode

'determinate' | 'indeterminate'

NeuralProgressBarSize

'small' | 'medium' | 'large'

NeuralProgressBarSeverity

NeuralProgressBarClasses

{ root?, track?, buffer?, value?, label? }

Legacy alias

ProgressBarComponent remains compatible. New code should import NeuralProgressBar.

DESIGN TOKENS

ProgressBar tokens

Each custom property maps to a real part of the component implementation.

Layout

--neural-progress-bar-radius

Component corner radius.

--neural-progress-bar-track-border

Track border shorthand.

--neural-progress-bar-shadow

Component box shadow.

Surface

--neural-progress-bar-track-background

Track background surface.

--neural-progress-bar-buffer-background

Buffer background surface.

--neural-progress-bar-value-background

Value background surface.

--neural-progress-bar-stripe-color

Stripe foreground color.

--neural-progress-bar-stripe-size

Stripe width and height.

Sizes

--neural-progress-bar-small-height

Small block size.

--neural-progress-bar-medium-height

Medium block size.

--neural-progress-bar-large-height

Large block size.

--neural-progress-bar-small-font-size

Small font size.

--neural-progress-bar-medium-font-size

Medium font size.

--neural-progress-bar-large-font-size

Large font size.

Severity

--neural-progress-bar-primary-background

Primary severity background surface.

--neural-progress-bar-secondary-background

Secondary severity background surface.

--neural-progress-bar-neutral-background

Neutral severity background surface.

--neural-progress-bar-info-background

Info severity background surface.

--neural-progress-bar-success-background

Success severity background surface.

--neural-progress-bar-warning-background

Warning severity background surface.

--neural-progress-bar-error-background

Error severity background surface.

Label

--neural-progress-bar-label-color

Label foreground color.

--neural-progress-bar-label-font-family

Label font family.

--neural-progress-bar-label-font-weight

Label font weight.

--neural-progress-bar-label-line-height

Label line height.

--neural-progress-bar-label-shadow

Label box shadow.

Motion

--neural-progress-bar-transition

Component CSS transition.

--neural-progress-bar-stripe-duration

Stripe animation duration.

--neural-progress-bar-indeterminate-width

Indeterminate inline size.

--neural-progress-bar-indeterminate-duration

Indeterminate animation duration.

--neural-progress-bar-indeterminate-easing

Indeterminate animation easing curve.