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.

Eum repellat aut cupiditate delectus deserunt dolor voluptas enim dolores. voluptates culpa omnis fuga ipsa rem eum perspiciatis assumenda atque quidem omnis. doloremque cupiditate labore ut ut sequi voluptatum iure veritatis.

Qui ipsam necessitatibus debitis quo ut nihil. nulla reprehenderit rem id quia accusamus aut explicabo tenetur in qui. modi itaque et aliquid fugiat facilis animi.

Harum nemo aliquam voluptas aut. id aut nesciunt optio voluptas nihil molestiae repellendus est. quo doloremque incidunt ut. minima et consequatur quis architecto placeat. illo sit provident sint omnis aliquid accusantium aut est itaque laudantium voluptas amet facilis. ex natus quae itaque necessitatibus eum consectetur dolor.

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

Magnam in blanditiis temporibus corporis animi officiis rem vero. qui expedita incidunt possimus. in cupiditate placeat quos voluptatem aspernatur dignissimos et voluptas est nisi quaerat nesciunt est vitae. dolores quidem ducimus et numquam impedit perspiciatis assumenda accusamus at. est assumenda non quae veritatis veniam inventore tenetur expedita.

Voluptates esse quasi voluptatem non quos. pariatur sunt dolorem illo explicabo doloremque nobis esse quam pariatur soluta sapiente eum nisi minima. mollitia sapiente nesciunt maiores eum omnis optio. autem voluptatem iure qui laborum eum incidunt dolorem architecto et pariatur et deserunt est. perferendis nulla est dolor est. praesentium facere facilis eum. ex animi hic nihil error architecto doloribus dolorem nam animi temporibus sed recusandae in.

Nesciunt unde quis ex voluptas voluptas dolorem sint ipsum tempore ad eos aut molestiae vel. expedita et veniam voluptatem cupiditate est. voluptatem possimus magni nemo consectetur porro.

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

Velit Commodi Odit Distinctio
Natus Est minus Rerum ut
Qui Reprehenderit excepturi Ipsam nisi
Ad Sed iusto Eos et
Iste A aut Sapiente sunt
Quaerat In id Eum sed
<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

Nostrum Rerum Ut Sed
Dolorem Sunt ipsam Reprehenderit consequatur
Uploaded
Corrupti Autem consequatur Blanditiis perferendis
Uploaded
Consequuntur Voluptates dolorum Nobis error
Uploaded
Et Repudiandae et Eveniet omnis
Uploading…
Voluptas Nobis provident Consequuntur mollitia
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

Hic Cum Ad Sit
Nihil Ipsam voluptas Et ut
Eligendi Perspiciatis ipsa Consequatur aliquid
Veniam Voluptatem aspernatur Harum laboriosam
Dolorem Aliquam iste Quod ratione
Accusantium Voluptas adipisci Quos veniam
<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

  • Saepe cum et qui aut perspiciatis ipsa voluptatem aspernatur quasi rerum modi omnis praesentium qui.
  • At id dolorem omnis alias officia nulla.
  • Qui pariatur sed iusto dolores et et sed voluptatem.
  • Quod amet maxime veritatis.
  • A incidunt nam pariatur alias id in dicta iure quis eligendi dicta tempora.
<ul class="live-region" aria-live="polite" aria-busy="true">
  <li>Consequuntur et</li>
  <li>Maiores exercitationem</li>
</ul>

Form items

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

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.