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
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
Add the package
Install the package using npm
npm i react-spinners-loading
Import the package into your react app
import Loader from 'react-spinners-loading'
Pass the configuration props:
Example of the Configuraiton array:
<Loader 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 |