react-modern-loading-spinner

    1.0.2 • Public • Published

    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'

    Install

    npm i react-modern-loading-spinner

    DownloadsWeekly Downloads

    8

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • zys5945