Skeleton

Skeleton loading states are perfect for when you want to give people a bit of a preview of what's to come. It avoids full page loading states, or helps you to show (re)loading of a part of the page.

Usage

Simply use the skeleton structure in any place you would normally use text.

The CSS automatically appends an   through an :after to ensure a proper line-height.
Randomize the width of the skeletons to match the data that will be loaded.
Try to match the content as much as possible

Simple skeleton

<p class="c-skeleton">
  <span class="c-skeleton__heading"></span>
  <span class="c-skeleton__heading w-6"></span>
</p>
<p class="c-skeleton">
  <span class="c-skeleton__child w-14"></span>
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-10"></span>
</p>
<p class="c-skeleton">
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-24"></span>
</p>

Centered skeleton

You can choose to center a skeleton as well.

<p class="c-skeleton c-skeleton--center">
  <span class="c-skeleton__heading"></span>
  <span class="c-skeleton__heading w-6"></span>
</p>
<p class="c-skeleton c-skeleton--center">
  <span class="c-skeleton__child w-14"></span>
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-10"></span>
</p>
<p class="c-skeleton c-skeleton--center">
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-24"></span>
</p>

Right aligned skeleton

And in rare occassions, right-align.

<p class="c-skeleton c-skeleton--end">
  <span class="c-skeleton__heading"></span>
  <span class="c-skeleton__heading w-6"></span>
</p>
<p class="c-skeleton c-skeleton--end">
  <span class="c-skeleton__child w-14"></span>
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-10"></span>
</p>
<p class="c-skeleton c-skeleton--end">
  <span class="c-skeleton__child w-6"></span>
  <span class="c-skeleton__child w-24"></span>
</p>

Skeleton tables

Show a few (or many) rows of tables, you can even prerender the columns. It is recommended to show any information you might already know of in advance. For example, rendering table headings while rows are still loading.

Table heading	Table heading	Table heading

<div class="c-box mb-0">
  <h2 class="c-box__header">Loading a table</h2>
  <table class="c-table rounded">
    <tr>
      <th class="c-table__th">
        Table heading
      </th>
      <th class="c-table__th">
        Table heading
      </th>
      <th class="c-table__th text-right">
        Table heading
      </th>
    </tr>
    <tr>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-14"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-14"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton c-skeleton--end">
          <span class="c-skeleton__child w-14"></span>
        </p>
      </td>
    </tr>
    <tr>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-6"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-6"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton c-skeleton--end">
          <span class="c-skeleton__child w-6"></span>
        </p>
      </td>
    </tr>
    <tr>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-20"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton">
          <span class="c-skeleton__child w-20"></span>
        </p>
      </td>
      <td class="c-table__td">
        <p class="c-skeleton c-skeleton--end">
          <span class="c-skeleton__child w-20"></span>
        </p>
      </td>
    </tr>
  </table>
</div>

Implementation

Type	Name
Elements
Skeleton	`.c-skeleton`
Heading	`.c-skeleton__heading`
Child	`.c-skeleton__child`
Modifiers
Align center	`.c-skeleton--center`
Align end	`.c-skeleton--end`
Heading/child Width	`.c-skeleton__child w-20`