Components

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

Content is loading...

HTML markup

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

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

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

Nunjucks markup

{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}

{{
    wmndsLoader({
        size: "small",
        classes: null
    })
}}

Nunjucks properties

Name	Type	Description
size	string	Determines the display size of the loader. If left blank, the loader will display at the default size. Other accepted values are `small` or `large`.
classes	string	Classes to add to the loader component.

Your privacy settings

General

Form elements

Loader

Loader

What does it do?

When to use it?

When not to use it?