Skip to content
Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.
Branch: master
Clone or download
Pull request Compare This branch is 113 commits behind danilowoz:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
scripts
src
stories
tests
.babelrc
.eslintrc
.flowconfig
.gitignore
.npmignore
.prettierrc
CODE_OF_CONDUCT.md
LICENSE
README.md
_config.yml
index.js
package-lock.json
package.json
yarn.lock

README.md

React Content Loader

Component in React and SVG with a collection of loaders that simulate the content will be loaded, similar to Facebook cards.

If you are looking for React Native or Vue.js

You can use it in two ways:

First install the dependency:

npm i react-content-loader --save-dev

Stylized: example

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

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

Or in custom mode: example

// 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

ContentLoader (wrap) options:

Name Type Default Description
style Object null Ex: { marginTop: '50px' }
type String facebook Options: facebook, instagram, list, code
speed Number 2 Animation speed
width Number 400 Width component
height Number 130 Height component
primaryColor String #f3f3f3 Background the SVG
secondaryColor String #ecebeb Animation color

Custom element options:

x y radius width height
Rect Number Number Number Number Number
Circle Number Number Number

Examples

Facebook Style

Facebook Style

Instagram Style

Instagram Style

Code Style

Code Style

List Style

List Style

Custom Style

Code Style

Todo

  • Code component;
  • Custom elements;
  • List component;
  • React Native

Credits

Boilerplate for creating React Npm packages with ES2015

License

MIT

You can’t perform that action at this time.