Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

API reference

Headless progress bar exposes one semantic root directive and one structural indicator directive. Range clamping and ARIA values live on the root.

Root directive

tngProgressBar adds role="progressbar", stable slot metadata, and normalized range attributes to your own element.

Root usage

html
<div tngProgressBar [min]="0" [max]="100" [value]="68" class="progress-track">
  <span tngProgressBarIndicator [style.width.%]="68" class="progress-indicator"></span>
</div>
InputTypeDefaultNotes
minnumber0Lower bound for determinate values.
maxnumber100Upper bound, normalized so it never falls below min.
valuenumber0Determinate value, clamped between min and max.
indeterminatebooleanfalseSuppresses the value ARIA attributes and marks the root with data-indeterminate.

Indicator directive

tngProgressBarIndicator is a structural hook only. It adds data-slot="progress-bar-indicator" and leaves width and animation fully in your hands.

Indicator usage

html
<div tngProgressBar [indeterminate]="true" aria-label="Preparing release" class="progress-track">
  <span tngProgressBarIndicator class="progress-indicator progress-indicator--indeterminate"></span>
</div>
DirectiveSelectorData slotPurpose
TngProgressBar[tngProgressBar]progress-barSemantic root for the linear progress range.
TngProgressBarIndicator[tngProgressBarIndicator]progress-bar-indicatorVisual fill element inside the owner-authored track.

Accessibility contract

  • The root always exposes role="progressbar".
  • Determinate mode sets aria-valuemin, aria-valuemax, and aria-valuenow.
  • Indeterminate mode removes those value attributes, so provide a clear label through nearby text or aria-label.
  • Because the primitive does not render a label, owners are responsible for visible context and contrast.