Loading spinner

Skip to HTML example

When to use this component

Use the loading spinner component to indicate that content is being loaded or an action is being processed.

Use a loading spinner when:

submitting data to CRM via the Web API
loading content dynamically after the page has rendered
waiting for a response from an external service

When not to use this component

Do not use a loading spinner:

for initial page loads (the browser handles this)
when the wait time is very short (under 1 second)
without accompanying text explaining what is loading

How it works

The loading spinner is a simple CSS animation that rotates continuously. It should be shown when an action begins and hidden when the action completes.

Always pair the spinner with descriptive text so users understand what is happening, especially for screen reader users.

HTML example

Copy the HTML from this page directly into your web template.

Loading, please wait...

<div class="govuk-!-margin-bottom-4">
  <div class="dfe-loading-spinner"></div>
  <p class="govuk-body">Loading, please wait...</p>
</div>

Warning This is a basic web template page layout with a logged-in user check and does not include additional liquid items which are commonplace on a CRM Portal.

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}

{% block main %}

{% unless user %}
  <script>
    window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
  </script>
{% endunless %}

<div class="govuk-!-margin-bottom-4">
  <div class="dfe-loading-spinner"></div>
  <p class="govuk-body">Loading, please wait...</p>
</div>


{% endblock %}

If you would like any additional advice or guidance with using this example on Power Pages, please contact the Solutions Delivery Team.