Guide · Open source

How to use react-content-loader: install and build skeleton loaders

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

react-content-loader is an open-source React component library that shows animated placeholder shapes, often called skeleton screens, while a page, card or list is still loading. It draws the placeholders as SVG. This guide shows you how to install it, use a ready-made preset, build a custom layout from rectangles and circles, and adjust its colors, speed and animation.

react-content-loaderdanilowoz/react-content-loader · ★ 14k · MIT Install options & downloads

Quick start

1Install the package. Run npm i react-content-loader --save or yarn add react-content-loader in your project.
2Import ContentLoader. Import the default ContentLoader component from 'react-content-loader'.
3Pick a preset or write a custom layout. Use a named preset such as Facebook, or place rect shapes inside ContentLoader with a viewBox that matches your layout.
4Match the shapes to your content. Set x, y, width and height so each rect lines up with the text line or image it stands in for.
5Adjust colors and speed. Set backgroundColor, foregroundColor and speed to suit your design.
6Show it while data loads. Render the loader while your data is pending, then swap in the real content when it arrives.

Install react-content-loader with npm or yarn

Add the package to your project with your package manager. The README lists npm and yarn commands. The web version has no listed prerequisites beyond a React project.

Use npm if your project uses npm.
Use yarn if your project uses yarn.

npm i react-content-loader --save
yarn add react-content-loader

Use a preset loader

The quickest option is a preset. Import the default ContentLoader component together with a named preset such as Facebook, then render it where your content will appear while data loads.

The README points to the examples gallery to see the available presets.
Rendering ContentLoader with no props gives you the default placeholder.

import ContentLoader, { Facebook } from 'react-content-loader'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

Build a custom placeholder layout

For a layout that matches your own card or profile, use custom mode. Put SVG shapes inside ContentLoader and set a viewBox that matches the size of your layout. The README's example uses rect elements with x, y, width, height, and optional rx and ry for rounded corners.

The README links to an online tool, create-content-loader, for building custom loaders visually.

viewBox sets the coordinate space the shapes are drawn in.
Each rect is positioned with x and y and sized with width and height.
Use rx and ry to round the corners.

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    {/* Only SVG shapes */}    
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

Change colors, speed and animation

Props control the look and motion of the loader. The README documents these options for web and React Native unless noted otherwise.

animate: defaults to true; set it to false to turn off the animation.
speed: animation speed in seconds, default 1.2.
backgroundColor: default #f5f6f7.
foregroundColor: default #eee.
backgroundOpacity and foregroundOpacity: default 1; the README notes these help with a Safari issue.
gradientRatio: width of the animated gradient as a fraction of the viewBox width, web only, default 1.2.
rtl: set to true for right-to-left content.
title: web only, defaults to 'Loading...'; use an empty string to remove it.
baseUrl: web only; needed when your document head uses a base tag.

Use react-content-loader in React Native

The React Native version uses the same API. Import from react-content-loader/native instead. The README says react-native-svg is needed for custom shapes, because React Native has no built-in SVG module. You can import Rect and Circle as named exports from the native entry point instead of using react-native-svg shapes directly.

Install react-native-svg alongside the package.
Import ContentLoader, Rect and Circle from 'react-content-loader/native' for custom loaders.

npm i react-content-loader react-native-svg --save

import ContentLoader, { Rect, Circle } from 'react-content-loader/native'

const MyLoader = () => (
  <ContentLoader viewBox="0 0 380 70">
    <Circle cx="30" cy="30" r="30" />
    <Rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <Rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

What people use it for

Placeholder for a card layout while product data loads.
Skeleton list rows for a feed or table of items.
Profile placeholder with a circle for an avatar and rectangles for text lines.
Placeholder loaders in a React Native app using react-native-svg.

Frequently asked questions

How do I install react-content-loader?

Run npm i react-content-loader --save or yarn add react-content-loader in your project. For React Native, the README says to also install react-native-svg.

Is react-content-loader free to use?

The package is released under the MIT licence, according to the project summary. Check the repository's licence file for the full terms.

Does react-content-loader work with React Native?

Yes. The README describes a React Native version with the same API, imported from react-content-loader/native. Custom shapes need react-native-svg or the Rect and Circle named exports.

How do I make a custom skeleton shape?

Place SVG rect or circle elements inside ContentLoader and set a viewBox. The README links to create-content-loader, an online tool for building custom loaders.

How do I change the color or speed of the animation?

Use the backgroundColor, foregroundColor and speed props. Speed is in seconds and defaults to 1.2.

What are the alternatives to react-content-loader?

The README lists react-loading-skeleton, react-placeholder and boneyard-js as comparable projects. Compare their APIs and features against your needs before choosing.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

react-content-loader suits React developers who want a small, dependency-free way to add skeleton placeholders on the web, or a matching API for React Native. Projects that need animation beyond the documented speed, color and opacity options, or that do not use React, should look at the comparable projects listed in the README.

Install options & downloads