Source: https://primereact.org/skeleton/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

Skeleton

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

Import#

---

import { Skeleton } from 'primereact/skeleton';
         

Copy

Shapes#

---

Various shapes and sizes can be created using styling properties like shape, width, height, borderRadius and className.

Rectangle

Rounded

Square

Circle

<h5>Rectangle</h5>
<Skeleton className="mb-2"></Skeleton>
<Skeleton width="10rem" className="mb-2"></Skeleton>
<Skeleton width="5rem" className="mb-2"></Skeleton>
<Skeleton height="2rem" className="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>

<h5>Rounded</h5>
<Skeleton className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
<Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>

<h5 className="mt-3">Square</h5>
<Skeleton size="2rem" className="mr-2"></Skeleton>
<Skeleton size="3rem" className="mr-2"></Skeleton>
<Skeleton size="4rem" className="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>

<h5 className="mt-3">Circle</h5>
<Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
         

Copy

Card#

---

Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.

<div className="border-round border-1 surface-border p-4 surface-card">
    <div className="flex mb-3">
        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
        <div>
            <Skeleton width="10rem" className="mb-2"></Skeleton>
            <Skeleton width="5rem" className="mb-2"></Skeleton>
            <Skeleton height=".5rem"></Skeleton>
        </div>
    </div>
    <Skeleton width="100%" height="150px"></Skeleton>
    <div className="flex justify-content-between mt-3">
        <Skeleton width="4rem" height="2rem"></Skeleton>
        <Skeleton width="4rem" height="2rem"></Skeleton>
    </div>
</div>
         

Copy

List#

---

Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.

<div className="border-round border-1 surface-border p-4">
    <ul className="m-0 p-0 list-none">
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li className="mb-3">
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
        <li>
            <div className="flex">
                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
                <div style={{ flex: '1' }}>
                    <Skeleton width="100%" className="mb-2"></Skeleton>
                    <Skeleton width="75%"></Skeleton>
                </div>
            </div>
        </li>
    </ul>
</div>
         

Copy

DataTable#

---

Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.

| Code | Name | Category | Quantity | | --- | --- | --- | --- | | | | | | | | | | | | | | | | | | | | | | | | | |

<DataTable value={items} className="p-datatable-striped">
    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
</DataTable>
         

Copy

Accessibility#

---

Screen Reader

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.

Keyboard Support

Component does not include any interactive elements.

• Import

• Shapes

• Card

• List

• DataTable

• Accessibility

PrimeReact 10.9.7 by PrimeTek