react-spinners-loading

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

Enjoy :)