Loading spinner based on Material-UI

Demo

Installation

npm i -S @flatlinediver/react-spinner

yarn add @flatlinediver/react-spinner

Basic usage example

import React from 'react';
import Spinner from '@flatlinediver/react-spinner';


export default = ({data}) => (
    {data.length
        ? <div>Mapped data</div>
        : <Spinner />
    }
)

Example using Suspense

import React from 'react';
import Spinner from '@flatlinediver/react-spinner';
const LazyComponent = lazy(() => import('./lazy-component'));

export default = () => (
    <Suspense fallback={<Spinner />}>
        <LazyComponent />
    </Suspense>
)

Example with props

import React from 'react';
import Spinner from '@flatlinediver/react-spinner';
const LazyComponent = lazy(() => import('./lazy-component'));

export default = () => (
    <Suspense fallback={
        <Spinner
            position = 'fixed'
            center
            colors = {['papayawhip', 'palevioletred']}
            speed = 'fast'
            size = {40}
            thick
            edges = 'square'
        />
    }>
        <LazyComponent />
    </Suspense>
)

Example with Spinner context (Overridden by Spinner props)

import React from 'react';
import Spinner, {SpinnerContext} from '@flatlinediver/react-spinner';
const LazyComponent = lazy(() => import('./lazy-component'));

export default = () => (
    <SpinnerContext.Provider value={{
        position: 'fixed',
        center: true,
        colors: ['papayawhip', 'palevioletred'],
        speed: 'fast',
        size: 40,
        thick: true,
        edges: 'square'
    }}>
        <Suspense fallback={
            <Spinner speed='slow' />
        }>
            <LazyComponent />
        </Suspense>
    </SpinnerContext.Provider>
)

Available props

• position - 'fixed', 'absolute' or 'static'. Spinner position based on the first relative parent. Default: 'static'
• center - boolean. Centers spinner based on the first relative parent. Ignored when position is set to 'static'. Default: false
• top - string (5px / 1em) / zero (0). Spinner top based on the first relative parent. Ignored when position is set to 'static' or center is true. Default: auto
• right - string (5px / 1em) / zero (0). Spinner right based on the first relative parent. Ignored when position is set to 'static' or center is true. Default: auto
• bottom - string (5px / 1em) / zero (0). Spinner bottom based on the first relative parent. Ignored when position is set to 'static' or center is true. Default: auto
• left - string (5px / 1em) / zero (0). Spinner left based on the first relative parent. Ignored when position is set to 'static' or center is true. Default: auto
• colors - string ('#ff0') / array of strings (['papayawhip', 'palevioletred']).Either fix stroke color or array of colors to be animated (timing is based on the array's length). Note: max-length is 4 and wrong colors throw an error. Default: ['#222', '#aaa']
• speed - 'slow', 'fast', 'normal'. Spinner animation timing. Default: 'normal'
• size - number mapped to px. Default: 32
• thick - boolean. Spinner stroke-width. Default false
• edges - 'square', 'round'. Spinner stroke-linecap. Default: 'round'