Loader

What does it do?

Helps users to understand they need to wait for something to finish happening
Continues to play the animation until the action is complete

When to use it?

When you are calling an API
In there area of the page that the action is occurring
Example: within a search box

When not to use it?

A service should not go live if there is a whole-page loading spinner
Try to avoid using a loading spinner, our services should respond quickly
If an action takes a long time, users will lose trust in the service

By default you should aim to use the 'normal sized loader'.
Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.

Change the text within .wmre-loader__content from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.

Component example

Content is loading...

HTML Markup

<!-- small sized loader -->
<div class="wmre-loader wmre-loader--small" role="alert" aria-live="assertive">
  <p class="wmre-loader__content">Content is loading...</p>
</div>

<!-- normal sized loader -->
<div class="wmre-loader" role="alert" aria-live="assertive">
  <p class="wmre-loader__content">Content is loading...</p>
</div>

<!-- large sized loader -->
<div class="wmre-loader wmre-loader--large" role="alert" aria-live="assertive">
  <p class="wmre-loader__content">Content is loading...</p>
</div>