API reference
Progress Bar exposes a minimal wrapper contract: normalized range values, indeterminate mode, and semantic accessibility attributes.
Wrapper component
tng-progress-bar renders the track and indicator for you, computes determinate width from the range, and forwards the primitive semantics underneath.
Wrapper usage
html
<tng-progress-bar [value]="68" ariaLabel="Upload progress"></tng-progress-bar>
<tng-progress-bar [indeterminate]="true" ariaLabel="Syncing data"></tng-progress-bar>
Range inputs
The wrapper exposes the same range inputs as the primitive and adds ariaLabel for easier explicit naming from template code.
| Input | Type | Default | Notes |
|---|---|---|---|
min | number | 0 | Lower bound used to clamp value. |
max | number | 100 | Upper bound used to clamp value; never falls below min. |
value | number | 0 | Current determinate progress value. |
indeterminate | boolean | false | Hides aria-valuenow, aria-valuemin, and aria-valuemax. |
ariaLabel | string | null | null | Supplies an explicit accessible name when surrounding context is not enough. |
Primitive foundation
Under the hood, the wrapper uses tngProgressBar for the semantic root and tngProgressBarIndicator for the fill element. Reach for the headless page when you want to own that markup directly.
Primitive foundation
html
<div tngProgressBar [value]="68" class="progress-track">
<span tngProgressBarIndicator [style.width.%]="68" class="progress-indicator"></span>
</div>