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.

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.

Inputs

Typed class slots

Public types

Legacy alias

ProgressBarComponent remains compatible. New code should import NeuralProgressBar.

Layout

Surface

Sizes

Severity

Label

Motion