Spinners

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

Variations

Basic Spinners

Copy as:HTMLReact

copydone

<!-- Component: Basic xl sized 1/2 spinner  -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-04a desc-04a" aria-live="polite" aria-busy="true" class="w-10 h-10 animate animate-spin">
  <title id="title-04a">Icon title</title>
  <desc id="desc-04a">Some desc</desc>
  <circle cx="12" cy="12" r="10" class="stroke-slate-200" stroke-width="4" />
  <path d="M12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2" class="stroke-emerald-500" stroke-width="4" />
</svg>
<!-- End Basic xl sized 1/2 spinner  -->

Colored Spinners

Copy as:HTMLReact

copydone

<!-- Component: Colored pink base sized 1/2 spinner -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-live="polite" aria-busy="true" aria-labelledby="title-05a desc-05a" class="w-6 h-6 animate animate-spin">
  <title id="title-05a">Icon title</title>
  <desc id="desc-05a">Some desc</desc>
  <circle cx="12" cy="12" r="10" class="stroke-slate-200" stroke-width="4" />
  <path d="M12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2" class="stroke-pink-500" stroke-width="4" />
</svg>
<!-- End Colored pink base sized 1/2 spinner -->

Squared Spinners

Copy as:HTMLReact

copydone

<!-- Component: Square horizontal base sized spinner -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-live="polite" aria-busy="true" aria-labelledby="title-08a desc-08a" class="w-6 h-6">
  <title id="title-08a">Icon title</title>
  <desc id="desc-08a">Some desc</desc>
  <path d="M7 8H3V16H7V8Z" class="fill-emerald-500 animate animate-bounce " />
  <path d="M14 8H10V16H14V8Z" class="fill-emerald-500 animate animate-bounce  [animation-delay:.2s]" />
  <path d="M21 8H17V16H21V8Z" class="fill-emerald-500 animate animate-bounce  [animation-delay:.4s]" />
</svg>
<!-- End Square horizontal base sized spinner -->

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.

Spinners

Variations

Basic Spinners

Colored Spinners

Squared Spinners

Usage

Specs

Accessibility notes

Check out the latest release!