Skip to main content
MybringDesign System

Spinners

Indicating that something is happening

Sizes

The spinner has three size classes: spinner, spinner--l and spinner--xl 

<div class="spinner">
  <!-- or spinner--l or spinner--xl -->
  <svg class="spinner__circular" viewBox="25 25 50 50" aria-label="Loading" role="progressbar">
    <circle
      class="spinner__path"
      cx="50"
      cy="50"
      r="20"
      fill="none"
      stroke-width="6"
      stroke-miterlimit="10"
    />
  </svg>
</div>

In submit button

When using a spinner in a submit button, a way to provide accessibility is to update the aria-label from 'Submit' to 'Loading'. Screen readers will then read 'Loading' when the submit button is clicked and the spinner is showing. 

<button disabled class="btn btn--green" aria-label="Loading">
  <div class="spinner">
    <svg class="spinner__circular" viewBox="25 25 50 50">
      <circle
        class="spinner__path"
        cx="50"
        cy="50"
        r="20"
        fill="none"
        stroke-width="6"
        stroke-miterlimit="10"
      />
    </svg>
  </div>
</button>

Indicate content loading

When using text along with a spinner, making the spinner decorative, the spinner can be hidden from screen reader using aria-hidden="true".

Loading entries
<div class="mal tc">
  <div class="text-1.25r">Loading entries</div>
  <div class="spinner--xl" aria-hidden="true">
    <svg class="spinner__circular" viewBox="25 25 50 50">
      <circle
        class="spinner__path"
        cx="50"
        cy="50"
        r="20"
        fill="none"
        stroke-width="6"
        stroke-miterlimit="10"
      />
    </svg>
  </div>
</div>

More accessibility

Consider how long the spinner will be visible

If the spinner is shown for a very short time or primarily for visual effect, it is not necessary to announce it to screen readers.

If the content takes a very long time to load, consider using a role="status" live region to announce that loading is still happening. This live region can also be used to notify when the loading is complete.

Reference

Convey loading has been completed

After informing the user that something is loading, it is important to notify them when the loading is complete. Some ways to do this is