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