Prism Docs

Skeleton

A placeholder component for content that is still loading.

Basic Usage

<prism-skeleton></prism-skeleton>
<prism-skeleton width="300px"></prism-skeleton>
<prism-skeleton variant="circle" width="80px" height="80px"></prism-skeleton>

Variants

Circle
Text
Rect
<prism-skeleton variant="text" width="100%"></prism-skeleton>
<prism-skeleton variant="rect" width="100%" height="200px"></prism-skeleton>
<prism-skeleton variant="circle" width="60px" height="60px"></prism-skeleton>

API

NameTypeDefaultDescription
activebooleantrueShow animation effect
variant'text' | 'rect' | 'circle''text'The variant of the skeleton
widthstring''Width of the skeleton
heightstring''Height of the skeleton
roundbooleanfalseWhether the skeleton has fully rounded corners