react-loaders-spinners

React Loaders Spinners

A component-based loaders/spinners React library, built with styled-components.

Demo - check out and play around with the examples here.

$3

If you need highly customizable loader(s) or spinner(s) in your React project.

Getting started

``
yarn add react-loaders-spinners
`
or
`
npm i react-loaders-spinners
`

Note that react-loaders-spinners lists styled-components as a peerDependency, therefore it expects you to have styled-components already installed in your project.

`javascript
import React from 'react';
import { BounceyLoader } from 'react-loaders-spinners';

const App = () => (

)
`

Available Props/Defaults/Types

Standard Default Props For ALL Loaders

| prop | default |
| ------------ | --------- |
| pColor:str | #555 |
| loading:bool | true *req |

Additional Available Props

| Loader/Spinner | height:int | width:int | sColor:str | spaceBetween:int | thickness:int | rows:int | lineHeight:int |
| ---------------- | ---------- | --------- | ---------- | ---------------- | ------------- | -------- | -------------- |
| PulseLoader | 100 | 100 | #f3f3f3 | | | | |
| BounceyLoader | 20 | 20 | | 20 | | | |
| SpinLoader | 50 | 50 | #f3f3f3 | | 10 | | |
| BoxLoader | 100 | 100 | | | | | |
| JamminLoader | | | | | 10 | | |
| ContentLoader | | 200 req | | | | 4 req | 20 |

PLEASE NOTE: For ContentLoader width refers to the parent container's width (in px cannot be %). It will work without a width however the animation will be off slightly. It is the only loader where width does not refer to the actual loader's width. A use case would be:
`javascript
// ContentLoader example



`

`javascript
// props example
width={200}
height={200}
pColor='dodgerblue' // can use hex or named color
sColor='#FF711E' // can use hex or named color
/>
``

Contributing

I'd love to get some feedback and contribution from the community. Feel free to file an issue, create a pull request, or leave some feedback as to how you think this project can be improved! More loaders/spinners to be added soon!