import Skeleton from 'primevue/skeleton';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"></script>
Skeleton displays a rectangle in its simplest form.
<Skeleton />
The other option is the circle by setting shape property as "circle".
<Skeleton shape="circle"/>
In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes.
<Skeleton width="100%" height="2rem" />
<Skeleton shape="circle" size="50px" />
The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property.
<Skeleton borderRadius="16px" />
Animation can be turned of by setting animation to "none".
<Skeleton animation="none" />
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| shape | string | rectangle | Shape of the element, options are "rectangle" and "circle". |
| size | string | null | Size of the Circle or Square. |
| width | string | 100% | Width of the element. |
| height | string | 1rem | Height of the element. |
| borderRadius | string | null | Border radius of the element, defaults to value from theme. |
| animation | string | wave | Type of the animation, valid options are "wave" and "none". |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-skeleton | Container element. |
| p-skeleton-circle | Container element of a determinate progressbar. |
| p-skeleton-animation-none | Container element of an indeterminate progressbar. |
None.