Imports

Use the primitive directives when you want to own the surrounding markup and visuals.

import { TngProgressBar, TngProgressBarIndicator } from '@tailng-ui/primitives';

Basic composition

The root owns the semantic range. The indicator is just a structural part, so you control width for determinate states and motion for indeterminate ones.

<div tngProgressBar [min]="0" [max]="100" [value]="72" class="progress-track">
  <span tngProgressBarIndicator class="progress-indicator" [style.width.%]="72"></span>
</div>

<div tngProgressBar [indeterminate]="true" aria-label="Loading report" class="progress-track">
  <span tngProgressBarIndicator class="progress-indicator progress-indicator--indeterminate"></span>
</div>

Range semantics

• min, max, and value are normalized and clamped on the root directive.
• Indeterminate mode removes aria-valuenow, aria-valuemin, and aria-valuemax.
• The indicator width is entirely owner-authored in headless mode.
• Provide clear context through nearby copy or aria-label when the task is not obvious.