React Content Loader

Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.

And if you are looking for React Native, see here.

You can use it in two ways:

First install the dependency:

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

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

Custom Style

Todo

• Code component;
• Custom elements;
• List component;
• React Native

Credits

Boilerplate for creating React Npm packages with ES2015

License

MIT