React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders. Use the create-react-content-loader for your custom loader

If you are looking for React Native, Preact or Vue.js

Installation

Using npm:

npm i react-content-loader --save-dev

Using Yarn:

yarn add react-content-loader --save

You can use it in two ways:

Stylized: example

// import the component
import ContentLoader from 'react-content-loader'

const MyLoader = () => {
  return(
    <ContentLoader type="facebook" />
  ) 
}

Or in custom mode: example

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

const MyLoader = () => {
  return(
    <ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
      <Circle x={195} y={30} radius={30} />
      <Rect x={50} y={80} height={10} radius={5} width={300} />
      <Rect x={75} y={100} height={10} radius={5} width={250} />
    </ContentLoader>
  ) 
}

Options

ContentLoader (wrap) options:

Name	Type	Default	Description
style	Object	null	Ex: { marginTop: '50px' }
type	String	facebook	Options: facebook, instagram, list, bullet-list, code
speed	Number	2	Animation speed
width	Number	400	Width component
height	Number	130	Height component
primaryColor	String	#f3f3f3	Background the SVG
secondaryColor	String	#ecebeb	Animation color

Custom element options:

	x	y	radius	width	height
Rect	Number	Number	Number	Number	Number
Circle	Number	Number	Number	–	–

Use the create-react-content-loader for your custom loader

Examples

Facebook Style

Instagram Style

Code Style

List Style

Bullet list Style

Custom Style

Credits

Boilerplate for creating React Npm packages with ES2015

License

MIT