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.

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

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