Spinner
A turning ring for work in progress, nol-spinner, standing still under reduced motion. The ring is drawn smaller than the spinner's box and centered in it, so it matches an icon's glyph while the box keeps the icon's place. With a label it is a status that announces the label, which is hidden from sight, so text beside it names the work to the eye; without one it is decorative. 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, and its label is announced only once it appears.
Examples
Loading…
States
Loading…
API
Selector nol-spinner
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
label | string | String.empty | The text that names the work, announced and hidden from sight; empty when not bound, which leaves the spinner decorative. |
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.
With a label, it has the status role and holds the label as its text, hidden from sight, so the work is announced.
Without a label it has no role, and the text beside it names the work.
Its ring is hidden from assistive technology, and stands still as a half ring under reduced motion.
With isDelayed on, it stays hidden for its first 300ms and adds its label only once it shows, so a delayed spinner is announced when it appears.
Specification
Loading…