Loading
Show a spinner on any element with aria-busy="true".
On this page
Add aria-busy="true" to an element and a spinner appears before its content. The attribute tells assistive technology that the element is busy, and the spinner is drawn by CSS.
<article aria-busy="true"></article>
<p aria-busy="true">Generating your report</p>Buttons and links
On a button, a submit input or a link with role="button", the spinner shows next to the label and the control stops taking pointer events. An empty button needs an aria-label, since there is no text left to name it.
<button aria-busy="true">Please wait</button>
<button aria-busy="true" aria-label="Please wait" class="secondary"></button>
<a href="#" role="button" aria-busy="true" class="outline">Loading link</a>Notes
The spinner is added to every element with aria-busy="true" except input, select, textarea, html and form. An element with content gets a gap after the spinner, and an empty one centers it. On filled buttons the spinner is white or black so it stays visible.
Toggle the state from script with el. and el.. If you use the purge step of the build integrations, an attribute set only from script is still found, because the scanner reads quoted strings.
The animation is inside the SVG image, so --pico-icon-loading is the one place to change it. For placeholder shapes in app UIs, see the extras.
Customization
--pico-icon-loading- The spinner image, an SVG data URI.