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.

Features

• Complety customizable: you can change the colors, speed and sizes;
• Create your own loading: use the create-react-content-loader to create your customs loadings easily;
• You can use right now: there are a lot of presets to use the loader, see the options;
• Perfomance: react-content-loader uses pure SVG to work, so it's works without any javascript, canvas, etc;

Usage

Installation

Yarn: $ yarn add react-content-loader

Npm: $ npm i react-content-loader --save

You can use it in two ways (See the options):

// import the component
import ContentLoader from 'react-content-loader'

const MyLoader = () => <ContentLoader type="facebook" />

Or in custom mode, using the online tool

const MyLoader = () => (
  <ContentLoader>
    {/* Pure SVG */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

Options

Name	Type	Default	Description
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
style	Object	null	Ex: { marginTop: '50px' }
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

Examples

Facebook Style

Instagram Style

Code Style

List Style

Bullet list Style

Custom Style

Alternatives

• React Native;
• Preact;
• Vue.js;
• Angular.

Development

Fork the repo then clone it

$ git clone git@github.com:YourUsername/react-content-loader.git && cd react-content-loader

Install the dependencies

$ yarn

Run the storybook to see your changes

$ yarn storybook

License

MIT