There are a variety of different methods used for adding spinners which depend on the elements used and their appropriate ARIA status.
<!-- Normal button start -->
<button class="button spinner" data-show-busy="true" disabled>Normal button</button>
<!-- Normal button end -->
See full-page example.
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:
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>
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>
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>
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>
<ul class="live-region" aria-live="polite" aria-busy="true">
<li>Consequuntur et</li>
<li>Maiores exercitationem</li>
</ul>
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 -->
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>
Add a spinner to the button that triggered the update.
These don't get a spinner.
These don't get a spinner.
These don't get a spinner.
Use the full-page spinner.
Add a spinner to the download button.
Add a spinner to the change course button.
Add a spinner to the submit button.
Use a live-region.
Use a live-region.