Skeleton

Use skeleton to achieve loading visual state for asynchronously rendered UI elements.

Examples

Base #

<div class="chi-skeleton"></div>

Rounded #

<div class="chi-skeleton -rounded"></div>

Circle #

<div class="chi-skeleton -circle"></div>

Square #

<div class="chi-skeleton -square"></div>

Rounded square #

<div class="chi-skeleton -square -rounded"></div>

Complex combination #

<div class="-mw--480">
  <div class="chi-skeleton -mt--2 -w--90"></div>
  <div class="-mt--2">
    <div class="chi-skeleton -xs -mt--1"></div>
    <div class="chi-skeleton -xs -mt--1 -w--90"></div>
    <div class="chi-skeleton -xs -mt--1 -w--50"></div>
  </div>
  <div class="-d--flex -mt--4">
    <div class="chi-skeleton -circle"></div>
    <div class="chi-skeleton -rounded -flex--grow1 -ml--2"></div>
    <div class="chi-skeleton -rounded -ml--2 -w--15"></div>
  </div>
</div>

Sizes #

-xs
-sm
-md
-lg
-xl
<!-- -xs-->
<div class="chi-skeleton -xs"></div>
<div class="chi-skeleton -rounded -xs"></div>
<div class="chi-skeleton -circle -xs"></div>
<div class="chi-skeleton -square -xs"></div>
<div class="chi-skeleton -square -rounded -xs"></div>

<!-- -sm-->
<div class="chi-skeleton -sm"></div>
<div class="chi-skeleton -rounded -sm"></div>
<div class="chi-skeleton -circle -sm"></div>
<div class="chi-skeleton -square -sm"></div>
<div class="chi-skeleton -square -rounded -sm"></div>

<!-- -md-->
<div class="chi-skeleton -md"></div>
<div class="chi-skeleton -rounded -md"></div>
<div class="chi-skeleton -circle -md"></div>
<div class="chi-skeleton -square -md"></div>
<div class="chi-skeleton -square -rounded -md"></div>

<!-- -lg-->
<div class="chi-skeleton -lg"></div>
<div class="chi-skeleton -rounded -lg"></div>
<div class="chi-skeleton -circle -lg"></div>
<div class="chi-skeleton -square -lg"></div>
<div class="chi-skeleton -square -rounded -lg"></div>

<!-- -xl-->
<div class="chi-skeleton -xl"></div>
<div class="chi-skeleton -rounded -xl"></div>
<div class="chi-skeleton -circle -xl"></div>
<div class="chi-skeleton -square -xl"></div>
<div class="chi-skeleton -square -rounded -xl"></div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon