react-content-loader

For React Native, import from react-content-loader/native.

Important: Because React Native does not have native SVG support, you must use the named exports Rect and Circle (or other shapes) provided by react-content-loader/native to ensure compatibility.

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>
)

When using react-content-loader in a React Native environment, you must also install react-native-svg as a peer dependency:

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

yarn add react-content-loader react-native-svg

To use react-content-loader in a web project, install it via npm or yarn:

npm i react-content-loader --save

yarn add react-content-loader

Because the component generates random IDs to link the SVG element with its background style, Server-Side Rendering (SSR) or snapshot testing can cause mismatches between the server-generated ID and the client-generated ID.

To resolve this, provide a stable string to the uniqueKey prop.

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

const MyFacebookLoader = () => <Facebook uniqueKey="my-random-value" />

The output of react-content-loader is a standard SVG. To make it responsive (e.g., for mobile), treat it like any other SVG by providing a viewBox and using CSS to control the width (e.g., width: 100%).

import { Code } from 'react-content-loader'

const MyCodeLoader = () => (
  <Code
    width={100}
    height={100}
    viewBox="0 0 100 100"
    style={{ width: '100%' }}
  />
)

Safari and iOS do not respect the alpha channel when using rgba values for backgroundColor or foregroundColor. To achieve transparency in these browsers, use rgb values for the colors and set the opacity using the backgroundOpacity and foregroundOpacity props instead.

{/* Instead of rgba, use rgb + opacity props for Safari/iOS compatibility */}
<ContentLoader
  backgroundColor="rgb(0,0,0)"
  foregroundColor="rgb(0,0,0)"
  backgroundOpacity={0.06}
  foregroundOpacity={0.12}>

The package provides several ready-to-use components that mimic common UI patterns. You can import and use them directly in your React application.

Available pre-built components:

• Facebook
• Instagram
• Code
• List
• BulletList

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

const MyFacebookLoader = () => <Facebook />

In custom mode, you use the ContentLoader component as an SVG wrapper. Inside it, you can place standard SVG shapes to define your loading pattern.

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>
)

You can use pre-built loader presets (like Facebook) by importing them directly from react-content-loader.

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

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