Spinner
Something is working, and how long it will take isn't known. The browser's own <progress>, with no value. Specification: docs/components/spinner.md
Basics
A <progress class="canon-spinner"> without a value, named by what's loading (aria-label). It takes the size of the text around it, and appears only after 0.4s, so a quick answer never flashes it.
Totals
Last synced
With words
A <label class="canon-spinner-label"> around it: the spinner, then the words, which show and name it. Use words where the spinner stands alone in a space, like a panel or a row; beside text that already says it, the spinner alone does.
Sizes
data-size sets it when the text around doesn't: sm 16px, md 20px, lg 32px for an empty panel.
In context
The region that's loading says so with aria-busy="true"; the spinner goes when the content comes. In a panel waiting for an answer, a large spinner with words, centered. In a field, beside the answer that's coming.
Delay
A spinner appears 0.4s after it's put in the page or shown: most waits end sooner, and one that flashes for an instant is noise. data-delay="none", on it or a container, shows it at once, for a wait known to be long. Open each to compare.
Show a spinner (after 0.4s)
Show a spinner with data-delay="none"
Edge cases
Right to left, the spinner comes first on the right. In a Button, the Button's own aria-busy="true" draws the same ring in place of its icon: no spinner inside it.