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.

Getting Started

Simply install it

npm install react-modern-loading-spinner

Then use it

import LoadingSpinner from 'react-modern-loading-spinner';

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

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

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'

Package detail