Loading Indicator

Loading indicators show that content is being loaded, processed, or submitted, asking the user to wait.

Considerations

Loaders should use either the alert or status ARIA roles. Use the "alert" role when the user needs to know immediately when loading finishes: for example, when submitting a form. This role causes assistive technologies to announce all changes in an assertive way, and could be annoying. Use the "status" role when the loading state doesn't need immediate attention: for example, when loading extra page content.

When loading content, use the aria-busy="true" attribute on the content's container. Change it to false when loading is complete.

Examples

Spinning Loading Indicator

In this example the SVG is hidden from assistive tech with aria-hidden="true" because the "loading" text is enough.

<div aria-busy="true">
  <span role="alert" class="loading-indicator">
    Loading…
    <svg
      fill="var(--color--primary-base)"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <title>Loading…</title>
      <path
        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
        opacity=".25"
      />
      <path
        d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
      />
    </svg>
  </span>
</div>