Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.
JavaScript
Latest commit 3651b3f Oct 10, 2017 @danilowoz danilowoz Update README.md

README.md

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

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Custom Style

Code Style

Todo

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

Credits

Boilerplate for creating React Npm packages with ES2015

License

MIT