README

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

 Features

- :gear: Customizable: Feel free to change the colors, speed, sizes, and even RTL;
- :ok_hand: Plug and play: with many presets to use, see the examples;
- :pencil2: DIY: use the create-content-loader to create your own custom loaders easily;
- 📱 React Native support: same API, as same powerful features;
- ⚛️ Really lightweight: less than 2kB and 0 dependencies for web version;

 Index

- Getting Started
- Usage
  - Native
- Options
- Examples
- Troubleshooting
- Similar packages
- Development

 Getting Started

sh
npm i react-content-loader --save


sh
yarn add react-content-loader


 For React Native

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


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


CDN from JSDELIVR

 Usage

There are two ways to use it:

1. Presets, see the examples:

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

const MyLoader = () = 
const MyFacebookLoader = () = 


2. Custom mode, see the online tool

jsx
const MyLoader = () = (
  
    {/ Only SVG shapes /}    
    
    
    
  
)


Still not clear? Take a look at this working example at codesandbox.io
Or try the components editable demo hands-on and install it from bit.dev

 Native

react-content-loader can be used with React Native in the same way as web version with the same import:

1. Presets, see the examples:

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

const MyLoader = () = 
const MyFacebookLoader = () = 


2. Custom mode

To create custom loaders there is an important difference: as React Native doesn't have any native module for SVG components, it's necessary to import the shapes from react-native-svg or use the named export Rect and Circle from react-content-loader import:

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

const MyLoader = () = (
  
    
    
    
  
)


 Options

| Prop name and type                | Environment                | Description                                                                                                                                                                                                                                                                                         |
| ---------------------------------------------------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animate?: boolean  Defaults to true                 | React DOMReact Native | Opt-out of animations with false