Loading

Loading indicators are implemented using the ARIA: aria-busy attribute, which consists of an element with aria-busy="true" to signal assistive technologies that an element is being updated and its contents are not yet ready.

Or with the <progress> element for operations with measurable progress.

Loading Card

Use aria-busy="true" on containers like cards to indicate content is loading:

<article class="card" aria-busy="true">
  <hgroup>
    <h3>Loading Content</h3>
    <p>Please wait while we fetch your data...</p>
  </hgroup>
</article>

Loading Button

For buttons, combine aria-busy="true" with the disabled attribute:

<button aria-busy="true" disabled>Processing...</button>
<button class="secondary">Cancel</button>

Loading with Progress

For operations with measurable progress, use the <progress> element to show completion percentage:

<article class="card">
  <h3>Uploading File...</h3>
  <progress value="65" max="100">65%</progress>
  <small>Uploading document.pdf (65% complete)</small>
</article>

Related

• [aria-busy] - ARIA attribute for indicating loading state
• [progress] - HTML element for displaying progress of an operation