Spinners

Guides to using ARIA live regions:

There are a variety of different methods used for adding spinners which depend on the elements used and their appropriate ARIA status.

Buttons

<!-- Normal button start -->
<button class="button spinner" data-show-busy="true" disabled>Normal button</button>
<!-- Normal button end -->

Example use in modal


Full page

See full-page example.

Live regions

For content that is dynamically loaded, use a live-region. Set aria-busy="false" when it has finished loading.

Ipsum nam nam enim sint maiores nulla dolorum. totam laboriosam quia aspernatur illum deserunt sint dolor culpa delectus dolores commodi aut adipisci. vitae non provident et autem illum.

Dolorem tempora iure facilis dolore cum. praesentium deserunt consequatur corrupti laudantium cum minus magnam culpa fuga. labore repellat commodi vitae adipisci.

Repellat occaecati ea consequatur. corrupti voluptatum quo mollitia repudiandae perspiciatis alias labore quam et dicta. alias sit non beatae possimus impedit fugit sapiente in in et ratione est iusto dicta. suscipit occaecati vero eos tempora quia quia ad eum et et adipisci alias sit.

<div class="live-region" aria-busy="true" aria-live="polite">
  <p>Non dolore voluptas eos maiores nihil.</p>
</div>

For user-interaction, the pattern is as follows:

  • The user instigates an action (e.g. clicks a button or chooses a filter option)
  • The trigger element is set to disabled and the live region is set to aria-busy="true"

Dolores eum accusamus animi laborum molestias. accusantium quam deserunt non ex debitis atque nulla pariatur tempora repellendus molestiae quas. architecto dolor aliquid eius delectus amet dicta et quasi dolor ea. aut sequi qui quisquam voluptas quis id maiores error inventore voluptate. expedita dignissimos porro in ab illo ullam. sed ipsum est aut maiores natus expedita.

Doloribus tenetur vel possimus harum quis enim. aut sed omnis aut enim sed doloribus ut minima. sint asperiores illum porro velit. quos veritatis illo in eum. illo id numquam architecto ex vel in veniam perspiciatis ut. cumque omnis suscipit quo ad laudantium tenetur temporibus quae ipsa quod doloremque. officia explicabo vel distinctio facere totam sed ut vero similique accusantium.

Omnis voluptatibus nesciunt et quaerat repellat iure animi. tempora nihil dignissimos quas sed ea quasi quia rem quidem nemo voluptatem. recusandae est ipsam voluptate occaecati eius cumque itaque qui cumque omnis eos aperiam ab rerum. blanditiis vel sit rem est commodi rerum. et et accusantium voluptatem. qui ullam quod et placeat autem reiciendis ut veniam eaque eum.

Normal state:

<p id="paragraph2" class="live-region" aria-busy="false" aria-live="polite">Ducimus nostrum voluptas aut aut porro veniam enim natus ut.</p>
<button id="paragraphButton2" class="button button--small" aria-controls="paragraph2">Update text</button>

While busy:

<p id="paragraph2" class="live-region" aria-busy="true" aria-live="polite">Ducimus nostrum voluptas aut aut porro veniam enim natus ut.</p>
<button id="paragraphButton2" class="button button--small" aria-controls="paragraph2 disabled">Update text</button>

Tables

Single row

Quisquam Doloribus Quo Aperiam
Nihil Voluptatem occaecati Sunt ullam
Quia Officiis ducimus Quis et
Dolores Molestias facere Eveniet et
Sit Quis voluptas Iure sit
Vel Et earum Est soluta
<tr id="id0b66884bf7" class="live-table__row" aria-busy="true" aria-live="polite">
  <td>Ipsum</td>
  <td>Et rerum</td>
  <td>Aliquam nihil</td>
  <td data-th="Actions">
    <div class="buttons">
      <button id="tableEditButton4" class="button button--small spinner" aria-controls="id0b66884bf7" disabled data-show-busy="true">Saving…</button>
      <button id="tableDeleteButton4" class="button button--small" disabled>Delete</button>
    </div>
  </td>
</tr>

Single cell

Vel Impedit Necessitatibus Aut
Consectetur Est architecto At qui
Uploaded
Aut Officiis quae Aut quis
Uploaded
Omnis Quidem quas Sapiente hic
Uploaded
Quidem Dolores molestias Dolorem illo
Uploading…
Est Vitae cum Voluptatem ipsa
Uploaded
<tr>
  <td>Voluptas</td>
  <td>Repellat quia</td>
  <td>Dolor quis</td>
  <td aria-live="polite" aria-busy="true">
    <div class="spinner spinner--inline" data-show-busy="true">Uploading…</div>
  </td>
</tr>

Whole table

Rem Enim Doloribus Sed
Qui Nam qui Magni asperiores
Sed Et eius Suscipit et
Sit Veniam aut Impedit numquam
Veniam Quam sit Tempora quasi
Enim Ut aut Ratione sint
<div class="live-region" aria-busy="true" aria-live="polite">
  <table>
    <thead>
      <tr>
        <th>Autem</th>
        <th>Qui</th>
        <th>Qui</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Odit</td>
        <td>Temporibus ipsam</td>
        <td>Et reiciendis</td>
      </tr>
    </tbody>
  </table>
</div>

Lists

  • Est et minima accusantium qui rem dolor ut consectetur nulla laudantium perferendis quos numquam.
  • Consequuntur qui quos ducimus sit voluptatibus minus commodi.
  • Temporibus qui neque nemo magni eum.
  • Nihil non quia veritatis inventore est ea ullam ratione a odio necessitatibus.
  • Nihil doloribus quibusdam in et.
<ul class="live-region" aria-live="polite" aria-busy="true">
  <li>Consequuntur et</li>
  <li>Maiores exercitationem</li>
</ul>

Form items

This would be the usual pattern as our form items generally have a wrpapper of some sort.

<!-- START form-item-select component -->
<div class="form-item live-region" aria-busy="true" aria-live="polite">
    <label for="select_element">Select element:</label>
    <select id="select_element" disabled="disabled">
        <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </optgroup>
    </select>
</div>
<!-- END form-item-select component -->

Miscellaneous inputs

Sometimes we don't have complete control over markup.

input type="button"
input type="submit"
Standard button for comparison
<input class="button spinner" type="button" value="Test" disabled>

Other components

Your changes are being applied, please wait…

Add a spinner to the button that triggered the update.

Videos

These don't get a spinner.

Lazy load images

These don't get a spinner.

Tabs when loading content

These don't get a spinner.

Application being created

Use the full-page spinner.

Waiting to download files

Add a spinner to the download button.

Change course (AMS, provider)

Add a spinner to the change course button.

Reference request being submitted

Add a spinner to the submit button.

Advisers timeline loading

Use a live-region.

Exhibitor widget

Use a live-region.