Skip to main content

This is a new service - your feedback will help us to improve it.

Loader


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 .wmcads-loader__content from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.

Component example

HTML Markup

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