Skeleton

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

Examples#

Base#

Web Component
HTML Blueprint

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

Rounded#

Web Component
HTML Blueprint

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

Circle#

Web Component
HTML Blueprint

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

Square#

Web Component
HTML Blueprint

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

Rounded square#

Web Component
HTML Blueprint

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

Complex combination#

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Web Component
HTML Blueprint

<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

Web Component
HTML Blueprint

<!-- -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>