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. |
Skeleton uses aria-hidden as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, you may use aria-busy on the container element as well to indicate the loading process.
Component does not include any interactive elements.
None.