react-fullpage-custom-loader v0.1.6

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,
}

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)