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 is 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

<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>