styled-loaders-react v1.1.0

styled-loaders-react

Loaders for React built with Styled Components.

Credits

This is React clone of SaraVieira 's amazing styled-loaders which provides loaders for Preact.

Huge thanks for all the hard work and letting me port it for React users.

Any new loaders that will be added in that original repository will be cloned here.

Usage

npm install styled-loaders-react

or

yarn add styled-loaders-react

import React from 'react'
import { Cube } from 'styled-loaders-react'

const Page = ({ loading }) =>
    <div>
        { loading ?
            <Cube/>
            : 'Your Content'
        }
    </div>

With Props

import React from 'react'
import { Block } from 'styled-loaders-react'

const Page = ({ loading }) =>
    <div>
        { loading ?
            <Block color="red" size="60px" duration="5s" />
            : 'Your Content'
        }
    </div>

Loaders

• Bar Props bgBar - Background of the bar default is #efefef color - Color of the bar default is #333 duration - Animation duration default is 0.5s

• Block Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px

• Circular Props color - Background of the spinner default is #333 * size - Size of the spinner default is 40px

• Cube Props color - Background of the spinner default is #333 size - Size of the spinner default is 40px cubeSize - Size of the each cube default is 15 * duration - Animation duration default is 1.2s

• CubeGrid Props color - Background of the spinner default is #333 * size - Size of the spinner default is 40px

• DotScale Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px * dotSize - Size of the dots default is 18px

• Pulsate Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px

• RotateScale Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px

• Scale Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px

• Stretch Props color - Background of the spinner default is #333 duration - Animation duration default is 1.2s size - Size of the spinner default is 40px * rectWidth - Width of each rectangle default is 6px

License

MIT