Nifty Procrastination Machine

    @clay.global/react-content-loader

    1.7.7 • Public • Published

    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

    Install

    npm i @clay.global/react-content-loader

    DownloadsWeekly Downloads

    14

    Version

    1.7.7

    License

    MIT

    Unpacked Size

    337 kB

    Total Files

    16

    Last publish

    Collaborators

    • clay-global
    • maxim.clay