Skeleton
Skeletons display a visual placeholder while content loads
<div style={{ display: "flex", gap: 12 }}>
<Skeleton variant="circle" height={48} />
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
<Skeleton variant="rectangle" width={200} height={28} />
<Skeleton variant="rectangle" width={150} height={12} />
</div>
</div>Animation
All Skeleton instances displaying a shimmer animation that sweeps across the page. Animations remain in sync even if Skeletons are displayed at different times.
Variants
Text
Text skeletons are used as placeholders for prominent text elements, such as titles and subtitles. Text skeletons automatically match the dimensions of the text they replace.
Sample large text
And some sample small text below
<h2>{isDataLoaded ? data.title : <Skeleton variant="text" />}</h2>
<p>{isDataLoaded ? data.body : <Skeleton variant="text" />}</p>Round
Round skeletons are used as placeholders for circular and pill-shaped elements, such as avatars or buttons.
<Skeleton variant="circle" height={40} />Box
Box skeletons are used as placeholders for square or rectangular elements, such as images.
<Skeleton variant="box" width={40} />