Loading Content

Spinner element

A general purpose .spinner class can be applied to an <Icon name="spinner" /> component to make it spin. It will automatically, and infinitely, spin. Additional Tailwind utility classes can be used to adjust the size and positioning within a layout.

Note: this class will make any element spin with this animation, but it is timed to create a seamless rotation effect with this particular icon. If you change the spinner icon, you may need to adjust the timimg or sequence of the animation, or create a new animation altogether.

Whenever possible, use the skeleton elements below rather than spinners. Generally, its better practice to use skeleton components that mimic content, and load content in small chunks. This provides a better experience to the user, and reduces the perception of waiting time.

html : Spinners

<div aria-label="loading" class="p-2" aria-busy="true" aria-live="polite">
  <span class="icon icon--spinner spinner"></span>
</div>
<div
  aria-label="loading"
  class="bg-neutral-900 dark rounded ml-4 p-2"
  aria-busy="true"
  aria-live="polite"
>
  <span class="icon icon--spinner spinner"></span>
</div>

Skeleton elements

Often its necessary to load sections or elements content individually. For this purpose, Skeleton elements can be use as a placeholder while this content is loading.

The basic skeleton element is just a grey box, applied using the .skeleton class name. Additional Tailwind utility classes can be used to give them dimensions, layout, etc.

html : Skeleton element

<div aria-label="loading" aria-busy="true" aria-live="polite">
  <div class="skeleton w-full h-10"></div>
</div>

Skeleton text

In addition to the basic skeletion element, they can also be composed into blocks that mimic default-sized and small text. A React component has also been provided to make this easier.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non rutrum ipsum. Curabitur suscipit, dolor sed vulputate rhoncus, tortor massa lacinia ligula, et ultrices magna risus at turpis. Ut congue congue velit eget fermentum.

html : Skeleton text, default size

<div aria-label="loading" aria-busy="true" aria-live="polite">
  <div class="skeleton-text">
    <div class="skeleton-text__line skeleton-text__line--default">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--default">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--default">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--default">
      <div class="skeleton"></div>
    </div>
  </div>
</div>

html : Skeleton text, small size

<div aria-label="loading" aria-busy="true" aria-live="polite">
  <div class="skeleton-text">
    <div class="skeleton-text__line skeleton-text__line--small">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--small">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--small">
      <div class="skeleton"></div>
    </div>
    <div class="skeleton-text__line skeleton-text__line--small">
      <div class="skeleton"></div>
    </div>
  </div>
</div>

Accessibility concerns

Note in the examples provided above, that the spinners and skeleton elements are surrounded by a container element with the following aria attributes:

aria-label="loading"
aria-busy="true"
aria-live="polite"

The provided components do not automatically add these attributes, since they are largely context dependent. When actual content is loaded into this container, the aria-label should be removed, and aria-busy should become false, thus announcing to screen-reader users that the content has changed and can now be read.