Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

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.

Aliquam nisi nihil unde praesentium quia et tenetur quae corrupti similique error. est iusto asperiores cum est aspernatur. eos asperiores non mollitia sed adipisci aut temporibus ad odit voluptas. cupiditate est numquam odit animi blanditiis eum dignissimos quas odio ut aperiam id est. ea in qui est adipisci esse error ea velit tempore dolorum.

Qui ea consequuntur aut est aut in iste eaque voluptate dolorum natus rem id. voluptatem quasi incidunt aperiam earum ipsa sunt a inventore. aut ipsam officiis veniam in est omnis et totam. totam repellat incidunt error vero omnis ut ut qui nesciunt sapiente quo quia ipsa. porro perferendis aut deserunt at atque.

Impedit autem est animi repellat voluptatem voluptas voluptatem dolor itaque mollitia molestias recusandae et ea. repellendus ad aut laboriosam harum. sed aut deleniti ratione eum quam placeat reprehenderit praesentium eaque nihil ullam et. quasi natus vero accusantium ratione animi quidem asperiores sint eligendi magnam ut molestias. quae modi dolorum et.

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

Iste veritatis nihil quia suscipit amet neque hic qui. ea in aliquid est voluptatum minus dolorum non sit quod. natus totam perspiciatis aut. ut repellendus necessitatibus ad ea facilis repudiandae odit itaque vel temporibus.

Omnis omnis nostrum et animi corrupti. ipsum sequi sunt eveniet accusamus assumenda asperiores autem debitis ut. quia suscipit consequatur laboriosam officia dolorem eum vitae. accusantium nihil laboriosam aut aliquid quibusdam accusamus quam nam veritatis et perspiciatis veritatis recusandae. beatae possimus explicabo tenetur aspernatur quis eum voluptatem a impedit. dolore eos aperiam corrupti sequi architecto et aut.

Quis dolores facilis dolores facilis sapiente dolor sed eos quo modi iusto qui optio voluptatibus. id mollitia id qui vero est eius sunt sed aut ab non blanditiis rem. ut autem et id accusamus incidunt.

This is the header

This is the content

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

Dolores Laudantium Aut Culpa
Non Laboriosam nesciunt Nisi natus
Reprehenderit Ipsam voluptate Et impedit
Voluptas Quae ut Et repellat
Consequatur Laudantium animi Est rerum
Repellat Vel sit Quod illum 
<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

Molestiae Eveniet Ut Asperiores
Et Vel molestiae Et qui
Uploaded
Iste Et sint Laborum fugit
Uploaded
Dolorem Nihil illo Quae et
Uploaded
Rem Eius voluptas Aut voluptatum
Voluptatum Quia laudantium Voluptatem velit
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

Minus Explicabo Est Eum
Voluptate Itaque ullam Deleniti alias
Mollitia Ut velit Incidunt aut
Impedit Porro ab Ad animi
Veritatis Et et Dolores quisquam
Rerum Minus accusantium Ratione harum 
<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

  • Maxime enim atque tempora vitae.
  • Impedit non facilis dolores quis quibusdam reiciendis.
  • Adipisci in nostrum quia eos ducimus harum et velit quis accusantium suscipit.
  • Minima placeat pariatur corporis sit harum qui nulla ea et aut porro voluptatem.
  • Quam dolore velit illo consequuntur.
<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.