React Loading Skeleton

Make beautiful, animated loading skeletons that automatically adapt to your app.

Open on CodeSandbox

Learn about thechanges in version3, or viewthev2documentation.

Install via one of:

yarn add react-loading-skeletonnpm install react-loading-skeleton

importSkeletonfrom'react-loading-skeleton'import'react-loading-skeleton/dist/skeleton.css'<Skeleton/>// Simple, single-line loading skeleton<Skeletoncount={5}/>// Five-line loading skeleton

TheSkeleton component should be used directly in your components in place ofcontent that is loading. While other libraries require you to meticulously crafta skeleton screen that matches the font size, line height, and margins of yourcontent, theSkeleton component is automatically sized to the correctdimensions.

For example:

functionBlogPost(props){return(<div><h1>{props.title||<Skeleton/>}</h1>{props.body||<Skeletoncount={10}/>}</div>);}

...will produce correctly-sized skeletons for the heading and body without anyfurther configuration.

This ensures the loading state remains up-to-date with any changesto your layout or typography.

Instead, make components withbuilt-in skeleton states.

This approach is beneficial because:

1. It keeps styles in sync.
2. Components should represent all possible states — loading included.
3. It allows for more flexible loading patterns. In the blog post example above,it's possible to have the title load before the body, while having bothpieces of content show loading skeletons at the right time.

Customize individual skeletons with props, or render aSkeletonTheme to styleall skeletons below it in the React hierarchy:

importSkeleton,{SkeletonTheme}from'react-loading-skeleton';return(<SkeletonThemebaseColor="#202020"highlightColor="#444"><p><Skeletoncount={3}/></p></SkeletonTheme>);

There are two ways to wrap a skeleton in a container:

functionBox({ children}:PropsWithChildren<unknown>){return(<divstyle={{border:'1px solid #ccc',display:'block',lineHeight:2,padding:'1rem',marginBottom:'0.5rem',width:100,}}>{children}</div>);}// Method 1: Use the wrapper propconstwrapped1=<Skeletonwrapper={Box}count={5}/>;// Method 2: Do it "the normal way"constwrapped2=(<Box><Skeleton/></Box>);

You may want to make the gradient used in the highlight element narrower or wider. To do this, you can set thecustomHighlightBackground prop. Here's an example of a narrow highlight:

<SkeletoncustomHighlightBackground="linear-gradient(90deg, var(--base-color) 40%, var(--highlight-color) 50%, var(--base-color) 60%)"/>

If you use this prop, thebaseColor andhighlightColor props are ignored, but you can still reference their corresponding CSS variables as shown in the above example.

In the example below, the width of the skeleton will be 0:

<divstyle={{display:'flex'}}><Skeleton/></div>

This happens because the skeleton has no intrinsic width. You can fix it byapplyingflex: 1 to the skeleton container via thecontainerClassName prop.

For example, if you are using Tailwind, your code would look like this:

<divstyle={{display:'flex'}}><SkeletoncontainerClassName="flex-1"/></div>

In the example below, the height of the<div> will be slightly larger than 30even though thereact-loading-skeleton element is exactly 30px.

<div><Skeletonheight={30}/></div>

This is a consequence of howline-height works in CSS. If you need the<div>to be exactly 30px tall, set itsline-height to 1.Seeherefor more details.

Contributions are welcome! SeeCONTRIBUTING.md to get started.

Our logo is based off an image fromFontAwesome. Thanks!