Progress
A thin progress bar, nol-progress, named for its work: it fills to a known fraction, or slides a bar across its track while the amount is unknown, standing still under reduced motion. Binding its isDelayed input, from its host directive RevealDelayDirective, to true keeps it hidden for its first 300 ms, so brief work does not flash it.
Examples
Loading…
States
Loading…
API
Selector nol-progress
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | Required | The bar's accessible name, naming the work. |
value | number | null | The fraction of the work done, from 0 to 1, or null while the amount is unknown; null when not bound. |
isDelayed | boolean | false | Whether the host stays hidden for its first 300 ms; false when not bound, which shows it at once. Setting it back to true after false starts the delay again. From its host directive, RevealDelayDirective. |
Accessibility
It takes no keys of its own.
It has the progressbar role, named by its label, with its fraction from 0 to 1 as its value; a value outside that range shows as the nearer end.
Without a value it has no value attribute, so no fraction is read, and its bar slides across the track, standing still under reduced motion.
With isDelayed on, it stays hidden for its first 300ms, so brief work does not flash it.
Specification
Loading…