Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

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

Components

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 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.



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
NameTypeDescription
sizestringDetermines the display size of the loader. If left blank, the loader will display at the default size. Other accepted values are small or large.
classesstringClasses to add to the loader component.