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.
JavaScript
Switch branches/tags

README.md

react-content-loader

Example's 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.

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, { 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
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

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Bullet list Style

Bullet list Style

Custom Style

Code Style

Alternatives

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