Skeleton

Skeleton is a placeholder to display instead of the actual content.

Code	Name	Category	Quantity
Code	Name	Category	Quantity
Code	Name	Category	Quantity
Code	Name	Category	Quantity
Code	Name	Category	Quantity
Code	Name	Category	Quantity


import { Skeleton } from 'primereact/skeleton';


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/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 valid attribute is passed to the root element implicitly, extended properties are as follows;

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 theming page.

Name	Element
p-skeleton	Container element.
p-skeleton-circle	Container element of a determinate progressbar.
p-skeleton-none	Container element of an indeterminate progressbar.