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.
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:
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> | 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> | 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> | 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>
<ul class="live-region" aria-live="polite" aria-busy="true">
<li>Consequuntur et</li>
<li>Maiores exercitationem</li>
</ul> <!-- 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 -->
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.