Skeleton

A placeholder for a pending value or a not-yet-interactive control.

Basic Usage

You can use cd-skeleton as a modifier class on Headings, Paragraphs, Buttons, Chips, or other elements to turn them into Skeletons.

Note: if you're turning an interactive element into a Skeleton, make sure to disable it!

<div class="cd-card" style="width: 400px">
  <p class="cd-card-title cd-skeleton"></p>
  <p class="cd-paragraph cd-skeleton"></p>
  <p class="cd-paragraph cd-skeleton"></p>
</div>

Skeleton Controller

If you want to turn multiple elements into Skeletons at the same time, you can use a Skeleton Controller. These can be useful when a large or complex component is loading.

To create a Skeleton Controller, create an element with the class cd-skeleton-controller. Skeleton Controllers default to a style of display: contents, so they will not affect the layout of the page.

To each of the elements inside the Skeleton Controller that should be turned into a Skeleton To each of the elements inside the Skeleton Controller that should be turned into a Skeleton while the Controller is loading, add the class cd-skeleton-item. You can control the loading state of the Skeleton Controller by adding or removing the class cd-is-loading to/from the Controller.

The same caveats apply as with the previous example: if you're turning an interactive element into a Skeleton, make sure to disable it.

Title

Line 1

Line 2

<div class="cd-card" style="width: 400px">
  <span class="cd-skeleton-controller">
    <p class="cd-card-title cd-skeleton-item">Title</p>
    <p class="cd-paragraph cd-skeleton-item">Line 1</p>
    <p class="cd-paragraph cd-skeleton-item">Line 2</p>
  </span>

  <div class="cd-if-js-enabled">
    <hr class="cd-divider" />
    <label class="cd-switch">
      Loading
      <input
        type="checkbox"
        class="cd-switch"
        onchange="
          document
            .querySelector('.cd-skeleton-controller')
            .classList.toggle('cd-is-loading', this.checked)
        "
      />
    </label>
  </div>
</div>