Code examples

  • There are many variations of loaders / spinners.
  • While the loader is present, other content on the page should be inert

Use semantic HTML

  • This semantic HTML contains all accessibility features by default by placing it inside a dialog.
  • If content is being loaded slowly behind the spinner inside an aria-live region, use aria-busy="true" to keep it from being read until the update is complete
<!-- Use aria-busy if content doesn't all load at once -->
<div id="really-slow-app" aria-live="polite" aria-busy="false">
  <button id="showModal">
    Launch spinner
  </button>

  <dialog role="dialog"
          class="takeover"
          id="modal"
          tabindex="-1"
          aria-modal="true"
          aria-labelledby="modal-title">
    <section>
      <progress tabindex="0" id="modal-title" class="spinner">
        Loading
      </progress>
    </section>
  </dialog>
</div>
Loading