SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading).

Features

• ⚙️ Customizable: Feel free to change the colors, speed, sizes and even RTL;
• 👌 Plug and play: with many presets to use, see the examples;
• ✏️ DIY: use the create-content-loader to create your own custom loaders easily;
• ⚛️ Lightweight: only 1.4kB gzipped and 0 dependencies;

Index

• Getting Started
• Usage
• Options
• Examples
• Similar packages
• Development
• Known Issues

Getting Started

npm i react-content-loader --save

yarn add react-content-loader

CDN from JSDELIVR

Usage

There are two ways to use it:

1. Presets, see the examples:

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

const MyLoader = () => <ContentLoader />
const MyFacebookLoader = () => <Facebook />

2. Custom mode, see the online tool

const MyLoader = () => (
  <ContentLoader>
    {/* Only SVG shapes */}
    <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>
)

Still not clear? Take a look at this working example at codesandbox.io

Options

animate?: boolean

Defaults to true. Opt-out of animations with false

ariaLabel? string | boolean

Defaults to Loading interface.... It's used to describe what element it is. Use false to remove.

speed?: number

Defaults to 2. Animation speed in seconds.

className? string

Defaults to an empty string. The classname will be set in the <svg /> element.

width? number

Defaults to 400. It will be set in the viewbox attr in the <svg />.

height? number

Defaults to 130. It will be set in the viewbox attr in the <svg />.

rtl? boolean

Defaults to false. Content right-to-left.

preserveAspectRatio?: string

Defaults to xMidYMid meet. Aspect ratio option of <svg/>. See the available options here.

primaryColor?: string

Defaults to #f3f3f3 which is used as background of animation.

secondaryColor?: string

Defaults to #ecebeb which is used as the placeholder/layer of animation.

primaryOpacity?: string

Defaults to 1. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari

secondaryOpacity?: string

Defaults to 1. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in Safari

style?: React.CSSProperties

Defaults to an empty object.

uniquekey?: string

Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more here.

Examples

Facebook Style

import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />

Instagram Style

import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />

Code Style

import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />

List Style

import { List } from 'react-content-loader'

const MyListLoader = () => <List />

Bullet list Style

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'}
  >
    {/* Only SVG shapes */}
    <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>
)

---

Similar packages

• 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

$ yarn: Install the dependencies;

$ yarn build: Build to production;

$ yarn dev: Run the docz to see your changes;

$ yarn test: Run all tests: type checking and unit tests;

$ yarn test:watch: Watch unit tests;

$ yarn tsc: Typescript checking;

$ yarn tsc:watch: Typescript checking with watching;

License

MIT

Known Issues

Alpha is not working: 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}>

Black box in Safari / iOS (again)

Using base tag on a page that contains SVG elements fails to render and it looks like a black box. Just remove the base-href tag from the <head /> and issue solved.

See: #93 / 109