Spinners

Indicates the loading state of a page or a page section.

Icon titleSome descIcon titleSome descIcon titleSome desc

Variations

Basic Spinners

Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone

Colored Spinners

Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone

Squared Spinners

Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone
Icon titleSome desccopydone

Usage

Use spinners to inform users about the status of ongoing processes, such as loading of the page, submitting a form, or saving updates.

Specs

Spinners come in 2 styles (circle and square spinners) and 4 sizes:

  • Small: 1rem (16px) width and height.
  • Base: 1.5rem (24px) width and height.
  • Large: 2rem (32px) width and height.
  • Extra large: 2.5rem (40px) width and height.

Accessibility notes

It’s almost expected that web apps will need some time to process their response to user actions. Those delays can be tied to interactions like submitting forms, changing routes, loading content from an API, and uploading files, to name a few.

Use these roles to the spinners container to improve accessibility:

  • aria-live : This ARIA attribute tells screen readers and other assistive tech, that part of the app contains dynamic content. The aria-live attribute takes three values: off, polite, and assertive / rude. Generally speaking, polite is a good default.
  • aria-busy : Once a container is aria-live, we can use aria-busy to tell the assistive tech that the container is getting new content. When the container is not refreshing, aria-busy will be false, and when it is waiting for new content, it’ll be true.

Check out the latest release!