React Loading Spinners 

A Highly Customizable React component to help you with loaders/spinners for specific part of your project or as a project loading, with built-in presets and the ability of using your own assets.

Online Demo

!Screenshots

You can check out this little demo to get the feel of it: Online demo

Get started

It's very easy to use the tool, follow the instructions

$3

Install the package using npm

``
npm i react-spinners-loading
`

$3

`
import Loader from 'react-spinners-loading'
`

$3


Example of the Configuraiton array:
``js
text="Loader Text"
animation="clock"
width="250px"
height="250px"
color="#FFF"
background="rgba(234, 12, 35, 0.7)"
/>
```
And that's pretty much it!

#### Explanation of the different properties you can pass:

| Name | Type | Default | Description |
| ------------ | ----------- | ----------- | ----------- |
| text | String | 'Loading...' | Unique string that defines the element |
| animation | String | null | One of the built-in presets [bar, circle, clock, dots, double-circle, drop, spinner] |
| color | String | '#FFFFFF' | The color of the text/spinner in HEX,RGB or RGBa |
| background | String | 'rgba(0, 0, 0, 0.7)' | The background color of the whole Loader in HEX,RGB or RGBa |
| width | String | '100%' | The Width of the Loader in Px/rem/em/% |
| height | String | '100%' | The Height of the Loader in Px/rem/em/% |
| fullscreen | Boolean | false | If the Loader should be showed in full-screen (Width & Height shouldn't be specified) |
| show | Boolean | true | To control if the Loader has to be shown or not |
| imageUrl | String | null | The URL for the Loading animation (animation doesn't need to be specified) |
| dismissible | Boolean | false | Showing a Closing button to close the Loader |

$3