Spinner

Different loading states we can use to indicate something is being loaded.

Usage

Sizes

In the simplest form, there's just a small rotating image.

<span class="c-spinner">
  <span class="c-spinner__img c-spinner__img--sm"></span>
</span>
<span class="c-spinner">
  <span class="c-spinner__img"></span>
</span>
<span class="c-spinner">
  <span class="c-spinner__img c-spinner__img--md"></span>
</span>
<span class="c-spinner">
  <span class="c-spinner__img c-spinner__img--lg"></span>
</span>

Colors

We use a masking technique technique for the spinner in CSS:

The spinner image shows the background color of .c-spinner__img
The background color is set to bg-current. This uses background: currentColor, which in turn uses the current text color.

This means you can set the colors in two ways:

Set the text color of the c-spinner
Set the background color of the c-spinner__img

<span class="c-spinner">
  <span class="c-spinner__img"></span>
</span>
<span class="c-spinner text-green">
  <span class="c-spinner__img"></span>
</span>
<span class="c-spinner">
  <span class="c-spinner__img bg-purple"></span>
</span>

With text

Combine the loading image with text to provide more context. You can use it behind a button for example.

Action clicked Saving changes

<div class="flex items-center gap-4">
  <a class="c-button c-button--disabled" href="#">Action clicked</a>
  <span class="c-spinner text-gray-700">
    <span class="c-spinner__img"></span>
    <span class="c-spinner__text">Saving changes</span>
  </span>
</div>

In a button

Use the spinner inside of button to show we're processing a change.

Loading now Second button

<a class="c-button" href="#">
  <span class="c-spinner">
    <span class="c-spinner__img"></span>
    <span class="c-spinner__text">Loading now</span>
  </span>
</a>
<a class="c-button c-button--white ml-2" href="#">
  Second button
</a>

Loading a table

If you're loading a table row, or loading more results, you can use this inside of a table.

Column	Column	Column
Loading more data

<div class="c-box mb-0">
<h2 class="c-box__header">Box title</h2>
<table class="c-table">
  <tr>
    <th class="c-table__th">Column</th>
    <th class="c-table__th">Column</th>
    <th class="c-table__th">Column</th>
  </tr>
  <tr>
    <td class="c-table__td" colspan="2">
      <span class="c-spinner text-gray-700">
        <span class="c-spinner__img"></span>
        <span class="c-spinner__text">Loading more data</span>
      </span>
    </td>
  </tr>
</table>
</div>

Loading a box

Loading graph

<div class="c-box mb-0">
  <h2 class="c-box__header">Box title</h2>
  <div class="h-96 flex items center justify-center">
    <span class="c-spinner">
      <span class="c-spinner__img"></span>
      <span class="c-spinner__text">Loading graph</span>
    </span>
  </div>
</div>

Loading an overlay

Loading overlay

<div class="c-overlay relative">
  <div class="c-overlay__inner relative items-center">
    <span class="c-spinner text-white">
      <span class="c-spinner__img"></span>
      <span class="c-spinner__text">Loading overlay</span>
    </span>
  </div>
</div>

Implementation

Type	Name
Elements
Spinner	`.c-spinner`
Img	`.c-spinner__img`
Text	`.c-spinner__text`
Modifiers
Small	`.c-spinner__img--sm`
Medium	`.c-spinner__img--md`
Large	`.c-spinner__img--lg`