Loaders

Loaders are indicators which convey a busy state to the user. They are used to show the user that something is loading and can even act as a placeholder for content that hasn’t loaded yet.

Spinner - A spinner is a loading indicator that informs the user that the process is in progress.
Skeleton - A skeleton is a placeholder for content that hasn’t loaded yet. It is used to show the user that something is loading.

Spinners

Spinners are used to indicate that a process is in progress.

Design Hints

Spinners are appropriate for notifying users that a process in progress. It can be used as an overlay over all the content or as a loading indicator for a specific area of the page, such as a submitted form waiting for server response. The color of the spinner can be customized to match the branding of the application. Additional textual information can be provided to the user using a text element which can enhance the user experience even further.

<div class="flex w-full flex-row justify-between gap-x-4">
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-indigo-600 motion-safe:animate-spin dark:text-indigo-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-blue-600 motion-safe:animate-spin dark:text-blue-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-cyan-600 motion-safe:animate-spin dark:text-cyan-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-green-600 motion-safe:animate-spin dark:text-green-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-gray-600 motion-safe:animate-spin dark:text-gray-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div
    aria-live="assertive"
    aria-busy="true"
    class="flex flex-col items-center justify-center"
    aria-labelledby="loading-label"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-gray-600 motion-safe:animate-spin dark:text-gray-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
    <span id="loading-label">Loading</span>
  </div>
</div>

<div class="flex w-full flex-row justify-between gap-x-4">
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-indigo-600 motion-safe:animate-spin dark:text-indigo-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-blue-600 motion-safe:animate-spin dark:text-blue-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-cyan-600 motion-safe:animate-spin dark:text-cyan-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-green-600 motion-safe:animate-spin dark:text-green-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div role="status" aria-label="Loading. Please wait...">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-gray-600 motion-safe:animate-spin dark:text-gray-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
  </div>
  <div
    aria-live="assertive"
    aria-busy="true"
    class="flex flex-col items-center justify-center"
    aria-labelledby="loading-label"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2rem"
      height="2rem"
      viewBox="0 0 24 24"
      class="text-gray-600 motion-safe:animate-spin dark:text-gray-400"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        fill-opacity="0.9"
        d="M12 2.25c-5.384 0-9.75 4.366-9.75 9.75s4.366 9.75 9.75 9.75v-2.437A7.312 7.312 0 1 1 19.313 12h2.437c0-5.384-4.366-9.75-9.75-9.75"
      ></path>
    </svg>
    <span id="loading-label">Loading</span>
  </div>
</div>

Accessibility Note: We use the role="status" attribute to inform the user that the content is loading which implicitly sets aria-live="polite" and aria-atomic="true" and has an aria-label attribute to convey additional textual information. For spinners which are used to block the user from further interaction until the process is complete, you can use aria-live="assertive" instead of role="status". The last example in the preview section uses a combination of aria-live="assertive" and aria-busy="true" to inform the user that the content is loading, useful when critical information is being loaded or if the full page is waiting for loading content. For more information about role="status", refer to this link from the MDN docs about status role .

Skeleton

Skeleton is perfect for giving user an idea of what type of content they can expect to see. It’s best used for loading data or content which may take time to load.

Design Hints

It is recommended to use skeletons only when the content takes time to load and a spinner is not sufficient to convey the loading state. The skeleton should resemble the visual characteristics of the content it replaces. For instance, if the content being loaded is a list of items, the skeleton should visually represent a list layout with placeholder elements resembling the individual items. Skeletons present a branding opportunity by using custom and consistently styled skeletons that can be used across the application.

<section
  class="flex flex-col motion-safe:animate-pulse"
  aria-live="polite"
  aria-busy="true"
>
  <!-- Skeleton -->
  <div class="h-64 w-full rounded-lg bg-zinc-200 dark:bg-zinc-900"></div>
  <div class="mt-4 space-y-4">
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-1/2 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-1/2 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
  </div>
  <!-- Skeleton Ends. When content is loaded we set aria-busy="false", aria-live="off" and change the content inside the section and remove the animate-pulse class -->
</section>

<section
  class="flex flex-col motion-safe:animate-pulse"
  aria-live="polite"
  aria-busy="true"
>
  <!-- Skeleton -->
  <div class="h-64 w-full rounded-lg bg-zinc-200 dark:bg-zinc-900"></div>
  <div class="mt-4 space-y-4">
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-1/2 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-3/4 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
    <div class="h-5 w-1/2 rounded-full bg-zinc-200 dark:bg-zinc-900"></div>
  </div>
  <!-- Skeleton Ends. When content is loaded we set aria-busy="false", aria-live="off" and change the content inside the section and remove the animate-pulse class -->
</section>

Accessbility Note: We use aria-live="polite" and aria-busy="true" to inform assistive technology that the content is being loaded and when the content is loaded you have to set aria-busy="false" to alert the assistive technology that the content is ready which can be then communicated to the user. If further updates aren’t expected to the content, you can set the aria-live="off" attribute. For critical information, you can set aria-live="assertive" instead of aria-live="polite" so that the user is immediately notified of the changes. To know more about aria-live, refer to this link from the MDN docs about aria-live .

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Skeleton	Yes	Yes	Yes	Yes	Yes
Spinner	Yes	Yes	Yes	Yes	Yes

The accessibility requirements for the loader depend on the type of content being loaded. If the content is critical, use aria-live=“assertive” instead of aria-live=“polite” to immediately notify the user of changes. From a user experience perspective, it’s beneficial to add visible text to the loader, providing additional information to the user. For instance, if loading a list of items, the loader could display text such as “Loading items…” or “Loading more items…“.