Spinners

Notes on Implementation

We do use Bootstrap’s Spinner component, but adjust the duration and number of iterations so the movement is slower and is completed in under 5 seconds.

Accessibility Notes

According to the Understanding Docs for WCAG Success Criterion 2.2.2: “A preloader animation is shown on a page which requires a certain percentage of a large file to be downloaded before playback can begin. The animation is the only content on the page and instructs the user to please wait while the video loads. Because the moving content is not presented in parallel with other content, no mechanism to pause, stop or hide it needs to be provided, even though the animation may run for more than 5 seconds for users with slower connections.”

Describing a Loading Progress

  • The element containing the spinner should have an accessible name to describe what is happening (such as “Loading…” as in examples below). The sr-only class can be used to hide this description from visual users.
  • Add the aria-busy attribute to the loading region and set it to true.
  • Update or remove this announcement once the loading is complete.

Example of Border Spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Example of Growing Spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...