API reference
Headless progress spinner exposes one semantic root directive. SVG markup, track circles, indicator circles, and motion remain owner-authored.
Root directive
tngProgressSpinner adds role="progressbar", stable slot metadata, and normalized range attributes to your root element.
Root usage
html
<span tngProgressSpinner [min]="0" [max]="100" [value]="68" class="spinner-root" aria-label="Upload progress">
<!-- owner-authored SVG -->
</span>
| Input | Type | Default | Notes |
|---|---|---|---|
min | number | 0 | Lower bound for determinate values. |
max | number | 100 | Upper bound, normalized so it never falls below min. |
value | number | 0 | Determinate value, clamped between min and max. |
indeterminate | boolean | false | Suppresses the value ARIA attributes and marks the root with data-indeterminate. |
SVG foundation
The primitive does not create track or indicator circles for you. Owners are responsible for SVG markup, circumference math, dash offset, and any indeterminate arc animation.
Owner-authored SVG
html
<span tngProgressSpinner [value]="68" class="spinner-root" aria-label="Upload progress">
<svg class="spinner-root__svg" viewBox="0 0 40 40">
<circle class="spinner-root__track" cx="20" cy="20" r="18"></circle>
<circle
class="spinner-root__indicator"
cx="20"
cy="20"
r="18"
stroke-dasharray="113.097"
[attr.stroke-dashoffset]="113.097 - (113.097 * 68) / 100"
></circle>
</svg>
</span>
Accessibility contract
- The root always exposes
role="progressbar". - Determinate mode sets
aria-valuemin,aria-valuemax, andaria-valuenow. - Indeterminate mode removes those value attributes, so provide a clear label through nearby text or
aria-label. - Because the primitive renders no visible content, owners are fully responsible for contrast, size, and motion clarity.