# react-modern-loading-spinner

As its name suggests, RMLS is a modern looking loading spinner react component.

P.S. I originally planned to use react-loading-spinner as its name, but as you guessed it, that name was occupied on npm ages ago.

<br>

# Getting Started

Simply install it

```
npm install react-modern-loading-spinner
```

<br>

Then use it
```
import LoadingSpinner from 'react-modern-loading-spinner';

...
render(){
    return (
        ...
        <LoadingSpinner />
    )
}
...
```

<br>

Sensible defaults are picked if nothing is specified, you can get a glimpse of it at the [demo][demo page], which roughly looks like this (highly recommend you checkout the demo page though):

![][demo gif]

[demo gif]: https://zys5945.github.io/react-modern-loading-spinner/demo.gif
[demo page]: https://zys5945.github.io/react-modern-loading-spinner/index.html

<br>

# Documentation

Here's a comprehensive list of the properties that you can specify on the component, along with the defaults

**width: string**  
Passed directly to the component as a css width property  
default "100%" 

**height: string**  
Passed directly to the component as a css height property  
default "100%"  

**blankAngle: number**  
Number in radians defining how big the empty arc will be when the arc finishes expanding  
default 1/4 π
  
**minAngle: number**  
Number in radians defining how big the arc is going to be when finishes contracting  
default 1/6 π
  
**startAngle: number**  
Number in radians defining the initial position / rotation of the arc  
default 2/3 π
  
**contractTime: number**  
The time it takes for contraction animation to complete, in miliseconds  
default 1000
  
**expandTime: number**  
The time it takes for expansion animation to complete, in miliseconds  
default 1000
  
**contractedWaitTime: number**   
Time in miliseconds defining the length of the pause between contraction and expansion animation  
default 105
  
**expandedWaitTime: number**  
Time in miliseconds defining the length of the pause between expansion and contraction animation  
default 158
  
**rotationCycleTime: number**  
The time it takes for the canvas to finish one rotation (360 degrees), in miliseconds  
default 2000
  
**refreshInterval: number**  
The time interval between each frame, in miliseconds  
default 16 (roughly 60 fps)

**overlay: any**  
If evaluates to true then the overlay is drawn  
default true

**overlayColor: string**  
Color of the overlay, passed as the css background-color to the underlying overlay  
default 'black'

**overlayOpacity: number**  
opacity of the overlay  
default 0.5
  
**track: any**  
If evaluates to true then the track is drawn  
default true

### Below are the properties that gets passed directly to the underlying canvas
  
**radius: number**  
The radius of the arc  
default 50

**arcWidth: number**  
LineWidth of the arc  
default 5

**arcColor**  
StrokeStyle of the arc  
default "#007bff"

**trackWidth: number**  
LineWidth of the track  
default 1

**trackColor**  
StrokeStyle of the track  
default 'black'