1.0.0 • Published 5 years ago

react-spinners-loading v1.0.0

Weekly downloads
61
License
MIT
Repository
github
Last release
5 years ago

React Loading Spinners Version

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

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:

NameTypeDefaultDescription
textString'Loading...'Unique string that defines the element
animationStringnullOne of the built-in presets bar, circle, clock, dots, double-circle, drop, spinner
colorString'#FFFFFF'The color of the text/spinner in HEX,RGB or RGBa
backgroundString'rgba(0, 0, 0, 0.7)'The background color of the whole Loader in HEX,RGB or RGBa
widthString'100%'The Width of the Loader in Px/rem/em/%
heightString'100%'The Height of the Loader in Px/rem/em/%
fullscreenBooleanfalseIf the Loader should be showed in full-screen (Width & Height shouldn't be specified)
showBooleantrueTo control if the Loader has to be shown or not
imageUrlStringnullThe URL for the Loading animation (animation doesn't need to be specified)
dismissibleBooleanfalseShowing a Closing button to close the Loader

Enjoy :)