jamiebg1 / react-content-loader

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.

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