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 online tool to create your own custom loader.

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

Installation

Using npm:

npm i react-content-loader --save

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

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

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

| 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 | viewBox width of SVG | | height | Number | 130 | viewBox height of SVG | | primaryColor | String | #f3f3f3 | Background the SVG | | secondaryColor | String | #ecebeb | Animation color | | preserveAspectRatio | String | xMidYMid meet | Aspect ratio option of SVG | | className | String | '' | Classname in the |

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 loaders

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