Super React Loader

The easiest way to implement a full-screen loader in React. Just import the library and write loader.show().

Demo

Try it on CodeSandbox.

Install

Using Npm:

npm i super-react-loader

or using Yarn:

yarn add super-react-loader

Basic usage

import loader from 'super-react-loader'
 
loader.show() // shows loader
loader.hide() // hides loader

Very easy and clean :)

Customization

You can choose between some preset loaders or create your custom.

Preset loaders

To use it you have to pass the preset name.

// in your index.js
loader.setPresetLoader({ preset: 'fold' })

All options

loader.setPresetLoader({
    preset: 'plane',    // loader preset name
    size: '8rem',       // loader size
    color: '#000',      // loader color
    bg: 'lightblue'     // background property
})

Available loaders (based on SpinKit library)

• plane
• chase
• baunce
• wave
• pulse
• flow
• swing
• circle
• circle-fade (default)
• grid
• fold
• wander

Set your custom loader component

const MyCustomLoader = () => <div>loading...</div>
 
loader.setCustomLoader(<MyCustomLoader />)

You can combine it with setPresetLoader to define the background

const MyCustomLoader = () => <div>Loading...</div>
 
loader.setPresetLoader({ bg: '#652BE2' }) // change background color
loader.setCustomLoader(<MyCustomLoader />)

API

loader.show([callBack()])

Mount loader component. Accepts an optional callback function that is executed when the loader render is complete.

loader.hide()

Unmount loader component.

loader.setPresetLoader({ preset, size, color, bg })

Changes the loader animation by another preset loader. Receives a strings object.

• preset: Name of the preset. Default is 'circle-fade'.
• size: Size of the loader. It set css width and length property. Default is '4rem'
• color: Color of the loader. Default is '#333'
• bg: Background css property. Default is '#fff'

loader.setCustomLoader(Component)

Sets a new custom loader inside a full-screen container. Receives a React component or element.

loader.isDisplaying()

Returns true if the loader is displaying. Otherwise returns false.