Skeleton

<BaseSkeleton
width="250px"
height="20px"
radius="4px"
/>

Props (3)

  • widthstring | numberAny CSS length, or a number for pixels. Defaults to 100%.
  • heightstring | numberAny CSS length, or a number for pixels. Defaults to 1em.
  • radiusstring | numberAny CSS length, or a number for pixels. Defaults to 4px; 50% makes a circle.

Text lines

A lower block per line, with a shorter last line.

<div class="lines">
<BaseSkeleton height="0.75em" />
<BaseSkeleton height="0.75em" />
<BaseSkeleton width="60%" height="0.75em" />
</div>

Avatar with text

A radius of 50% makes a circle. A number is a size in pixels.

<div class="person">
<BaseSkeleton width="48" height="48" radius="50%" />
<div class="text">
<BaseSkeleton width="8rem" />
<BaseSkeleton width="5rem" height="0.75em" />
</div>
</div>

Card

A fixed height for the image, with a title and text below it.

<div class="card">
<BaseSkeleton height="9rem" radius="12px" />
<BaseSkeleton width="70%" height="1.25em" />
<BaseSkeleton height="0.75em" />
<BaseSkeleton height="0.75em" />
</div>