react-overlay-loader

A simple overlay loader for React web applications

!loader demo

Installation

Install using npm

``
npm install react-overlay-loader --save
`

Usage

$3

1. Import Loader and LoadingOverlay from react-overlay-loader

2. Include the styles from react-overlay-loader/styles.css

3. Use LoadingOverlay like a normal div and place a Loader anywhere inside it. When the loading prop passed to Loader is true, a translucent overlay is shown over the content inside LoadingOverlay, with a spinner in the center.

`javascript
import React, { Component } from 'react';
import { render } from 'react-dom';
import { LoadingOverlay, Loader } from 'react-overlay-loader';

import 'react-overlay-loader/styles.css';

class App extends Component {
state = { loading: false }
render() {
const { loading } = this.state;
return (


)
}
}

render(, document.getElementById('root'));

`

$3

If you want to show the overlay over the entire page, just use Loader with the prop fullPage set to true (no need to use LoadingOverlay).

`javascript
import React from 'react';
import { Loader } from 'react-overlay-loader';

import 'react-overlay-loader/styles.css';


const App = () => (


);

`

$3

The spinner can be customized by applying styles to react-overlay-loader-spinner:before. Here are the default styles:

`css
.react-overlay-loader-spinner:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin-top: -30px;
margin-left: -20px;
border-radius: 50%;
border: 3px solid #eee;
border-top-color: #07d;
animation: react-overlay-loader-spinner 0.8s linear infinite;
}
``