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