react-fullpage-custom-loader

A full page loading modal with spinners and random custom text for React

Install

npm install --save react-fullpage-custom-loader

Example

For a small React templating example: cd to react-fullpage-custom-loader/example and npm start or check it out on its Github page

Usage

Basic

import React, { Component } from 'react'

import MyComponent from 'react-fullpage-custom-loader'

class Example extends Component {
  render () {
    return (
      <MyComponent />
    )
  }
}

Pass your custom loader instead of one of the default

import React, { Component } from 'react'

import MyComponent from 'react-fullpage-custom-loader'

class Example extends Component {
  render () {
    return (
      <MyComponent customLoader={<CustomSpinnerComponent />}/>
    )
  }
}

Advanced

These are all the props you could pass to the component MyComponent

const props: {
    sentences: PropTypes.array,
    loaderType: PropTypes.string,
    loaderSize: PropTypes.string,
    color: PropTypes.string,
    textStyles: PropTypes.object,
    wrapperBackgroundColor: PropTypes.string,
    counter: PropTypes.bool,
    counterMax: PropTypes.number,
    counterDelay: PropTypes.number,
    counterChars: PropTypes.string,
    counterStyles: PropTypes.object,
    fadeIn: PropTypes.bool,
    startFadeOut: PropTypes.bool,
    customLoader: PropTypes.object,
    width: PropTypes.string,
    height: PropTypes.string,
}

| prop | type | default | description | example | |---|---|---|---|---| | sentences | Array of strings | Random quotes form authors I like (Adams, Pratchett, Asimov, Clarke) | You can set as many sentences you like and thanks to CSS display: preline you could insert line breaks with \n | ['One sentence', 'One with a \n linebreak', '"Quoting an " - author']| | loaderType | string / enum | ball-spin-clockwise | A string representing one of the 52 possible animations (see list below) | timer | | loaderSize | string | null | There are 3 possible sizes: small, big and null for normal | big | | color | string | white | Any valid CSS color string | rgba(0, 0, 0, 0.75) | | textStyles | object | { ...css.stuff } | Use it to override the main text properties. Accepts any React CSS style object | { color: 'red', fontSize: '3em' }| | wrapperBackgroundColor | string | rgba(0,0,0,0.75) | Any valid CSS for property background will work, even gradients and RGBA | black | | counter | boolean | false | You can show a counter that is either a number representing the cycles or a series of characters | true | | counterMax | integer | 15 | The maximum number of cycles to stop randomizing sentences | 15 | | counterDelay | integer | 3000 | The number of milliseconds before a new cycle will throw a random to show a new sentence | 1000 | | counterChars | string | . | A series of characters to be shown in the counter zone adding one every cycle | 😅 | | counterStyles | object | {...this.props.textStyles} | Use it to override the counter text properties. Accepts any React CSS style object and default to the above textStyles | { color: 'red', fontSize: '3em' } | | fadeIn | boolean | false | If set to true, the loader is shown with a fade in effect on opacity (300ms ease-out) | true | | startFadeOut | boolean | false | When this is set to true the entire loader will start to fade out on opacity (300ms ease-in), but even if faded you must destroy the component yourself | true | | customLoader | Object / React component | null | You could pass a component to be shown INSTEAD of one the loaders | customLoader={<CustomLoader />} | | width | string | null | a custom width for the background | '500px' or '100%' | | height | string | null | a custom height for the background | '500px' or '100%' |

Notes:

When you choose a Spinner we lazy-load only that component (a functional React component importing a small css file) and we pass your styles to it. You could use this components stand alone, you will only need the right CSS file and the right amount of <DIV /> elements to include (I know, a bit confusing, make sense if you look at the original spinners demo HTML)

Fading out the component before unmount

For performance issues you should create and destroy this component (for instance at render() time) such as:

render () {
    return (
        {this.state.showLoader && <MyComponent {...options} />}
    )
}

In React terms this means that you take the element away from the DOM and you won't have time to start our nice fade out animation. If you want to fade out your component you will need a bit of a workaround, something on the lines of:

    fadeAndCloseLoader = () => {
        this.setState({startFadeOut: true}))
        setTimeout(() => {
          this.setState({showLoader: false, startFadeOut: false})
        }, 300)
    }
    
    render () {
        return (
            {this.state.showLoader && <MyComponent 
                {...options} 
                startFadeOut={this.state.startFadeOut}/>
            }
        )
    }

In this example the method fadeAndCloseLoader() sends the startFadeOut prop first, the 300 milliseconds later destroys the Component. Note that in the same timeout call we reset startFadeOut to false to hide the CSS .hidden class in case you wanted to reopen the loader.

All animations are 100% CSS.

All the spinners in the world

A demo of all (100% CSS) spinners can be found at Load Awesome, just note that I couldn't make Cog to work and it is therefore not included.

Here is a useful copy/paste list (note the typo fussion has been kept for too many reasons I do not have the time to explain here, my most sincere apologies):

• ball-8bits
• ball-atom
• ball-beat
• ball-circus
• ball-climbing-dot
• ball-clip-rotate
• ball-clip-rotate-multiple
• ball-clip-rotate-pulse
• ball-elastic-dots
• ball-fall
• ball-fussion
• ball-grid-beat
• ball-grid-pulse
• ball-newton-cradle
• ball-pulse
• ball-pulse-rise
• ball-pulse-sync
• ball-rotate
• ball-running-dots
• ball-scale
• ball-scale-multiple
• ball-scale-pulse
• ball-scale-ripple
• ball-scale-ripple-multiple
• ball-spin
• ball-spin-clockwise
• ball-spin-clockwise-fade
• ball-spin-clockwise-fade-rotating
• ball-spin-fade
• ball-spin-fade-rotating
• ball-spin-rotate
• ball-square-clockwise-spin
• ball-square-spin
• ball-triangle-path
• ball-zig-zag
• ball-zig-zag-deflect
• [- cog -] This doesn't work, don't use it. You have been warned.
• cube-transition
• fire
• line-scale
• line-scale-party
• line-scale-pulse-out
• line-scale-pulse-out-rapid
• line-spin-clockwise-fade
• line-spin-clockwise-fade-rotating
• line-spin-fade
• line-spin-fade-rotating
• pacman
• square-jelly-box
• square-loader
• square-spin
• timer
• triangle-skew-spin

License

MIT © regrunge

Acknowledgements

All Loaders CSS files are coming from load-awesome MIT © danielcardoso (I have used 52 of his 53 awesome loaders, missing only Cog that didn't display as it should)