Loader
aria-busy="true" shows a spinner before the content, in the text color.
The attribute also tells screen readers that the content is loading. Remove it when the work is done. Form controls cannot show a spinner, so put it on their button or label instead.
Loading your projects
Buttons and links
A busy button or link keeps its spinner and label on one line.
aria-busy does not stop the mouse or the keyboard, so also set
aria-disabled="true". The button looks disabled but keeps focus,
and your script ignores it until the work is done. Announce the result in a
role="status" region.
Spinner only
An empty busy element shows the spinner alone. Give it role="status" and a label, so screen readers announce it.
Reduced motion
The spinner keeps turning when the user prefers reduced motion, since it carries meaning. See user preferences.
Variables
| Variable | Default |
|---|---|
--i-loader-durationOne spinner turn | 0.75s |