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

• :gear: Completely customizable: you can change the colors, speed and sizes;
• :pencil2: Create your own loading: use the create-content-loader to create your own custom loadings easily;
• :ok_hand: You can use right now: there are a lot of presets to use it, see the examples;
• :rocket: Performance: it uses pure SVG to work, so it works without any extra scripts, canvas, etc;

Usage

Installation

Yarn: $ yarn add react-content-loader

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

CDN: from JSDELIVR

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

// import the component
import ContentLoader, { Facebook } from 'react-content-loader'

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <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 | | ----------------------- | ----------- | ---------------- | ---------------------------------------------------------- | | animate | {Boolean} | true | false to render with no animation | | speed | {Number} | 2 | Animation speed in seconds | | className | {String} | '' | Classname in the <svg/> | | width | {Number} | 400 | viewBox width of <svg/> | | height | {Number} | 130 | viewBox height of <svg/> | | preserveAspectRatio | {String} | xMidYMid meet | Aspect ratio option of <svg/> | | primaryColor | {String} | #f3f3f3 | Background | | secondaryColor | {String} | #ecebeb | Animation color | | primaryOpacity | {Number} | 1 | Background opacity (0 = transparent, 1 = opaque) | | secondaryOpacity | {Number} | 1 | Animation opacity (0 = transparent, 1 = opaque) | | style | {Object} | null | Ex: { width: '100%', height: '70px' } | | uniquekey | {String} | random unique id | Use the same value of prop key, that will solve inconsistency on the SSR. |

Examples

Facebook Style

// import the component
import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />

Instagram Style

// import the component
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />

Code Style

// import the component
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />

List Style

// import the component
import { List } from 'react-content-loader'

const MyListLoader = () => <List />

Bullet list Style

// import the component
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />

Custom Style

For the custom mode, use the online tool

const MyLoader = () => (
  <ContentLoader height={140} speed={1} primaryColor={'#333'} secondaryColor={'#999'}>
    {/* 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>
)

Similars

• React Native;
• Preact;
• Vue.js: vue-content-loading, vue-content-loader;
• Angular.

Development

Fork the repo then clone it

$ git clone [email protected]:YourUsername/react-content-loader.git && cd react-content-loader

Install the dependencies

$ yarn

Run the storybook to see your changes

$ yarn storybook

License

MIT

Known Issues

• Safari / iOS

  When using rgba as a primaryColor or secondaryColor value, Safari does not respect the alpha channel, meaning that the color will be opaque. To prevent this, instead of using an rgba value for primaryColor/secondaryColor, use the rgb equivalent and move the alpha channel value to the primaryOpacity/secondaryOpacity props.

  {/* Opaque color in Safari and iOS */}
  <ContentLoader 
    primaryColor="rgba(0,0,0,0.06)" 
    secondaryColor="rgba(0,0,0,0.12)">
    
  
  {/* Semi-transparent color in Safari and iOS */}
  <ContentLoader 
    primaryColor="rgb(0,0,0)"
    secondaryColor="rgb(0,0,0)"
    primaryOpacity={0.06}
    secondaryOpacity={0.12}>