1.0.1 • Published 6 years ago
@delwiv/styled-loaders-react v1.0.1
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
- 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