Skeleton
Examples
Base
Rounded
Circle
Square
Rounded square
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.
<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>