@clay.global/react-content-loader NPM

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