Processing your request
Please wait while we process your request. Do not refresh the page.
Loading
An animated SVG spinner injected via CSS whenever
aria-busy="true" is set.
Button
<button aria-busy="true">Saving…</button>Custom element
Any element with aria-busy="true" gets a spinner via
::before.
<div style="width: 1rem; height: 1rem" aria-busy="true"></div>Loading card
Compose with an article and a centered layout to build a
blocking state panel.
<article
style="
border-style: dashed;
text-align: center;
display: grid;
place-items: center;
gap: var(--spacing-4);
"
>
<div
aria-busy="true"
style="
width: 2.5rem;
height: 2.5rem;
border-radius: 8px;
background: var(--jazz-neutral-100);
display: grid;
place-items: center;
"
></div>
<div>
<p style="margin-bottom: var(--spacing-2)">
<strong>Processing your request</strong>
</p>
<p style="color: var(--jazz-neutral-500)">
Please wait while we process your request. Do not refresh the page.
</p>
</div>
<button class="outline">Cancel</button>
</article>