@clay.global/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.

Usage no npm install needed!

<script type="module">
  import clayGlobalReactContentLoader from 'https://cdn.skypack.dev/@clay.global/react-content-loader';
</script>

README

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. Use the online tool to create your own custom loader.

If you are looking for React Native, Preact or Vue.js

Installation

Using npm:

npm i react-content-loader --save

Using Yarn:

yarn add react-content-loader --save

You can use it in two ways:

Stylized: example

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

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

Or in custom mode: example

Use the create-react-content-loader for your custom loaders

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

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

Custom element options:

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

Use the create-react-content-loader for your custom loaders

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

Credits

Boilerplate for creating React Npm packages with ES2015

License

MIT