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.

See <progress> documentation page for more details and examples.

Loading indicator

<article class="card" aria-busy="true">
  Loading content...
</article>

Progress indicator

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

Loading Button

<button disabled="disabled" aria-busy="true">
  Loading...
</button>

Loading Card

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

Loading Form

<form aria-busy="true">
  <label>Name</label>
  <input type="text" disabled>
  <label>Email</label>
  <input type="email" disabled>
  <button disabled>Submit</button>
</form>

Best Practices

1. Show progress - If duration is known
2. Keep users informed - Don't leave them guessing
3. Provide alternatives - Allow cancellation
4. Accessibility - Use aria-busy appropriately