react-overlay-loader

    0.0.3 • Public • Published

    react-overlay-loader

    A simple overlay loader for React web applications

    loader demo

    Installation

    Install using npm

    npm install react-overlay-loader --save
    

    Usage

    Overlay on parts of the page

    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.

    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 (
          <div style={{ height: '100vh', backgroundColor: 'lavender', padding: 16 }}>
            <LoadingOverlay style={{ width: 200, height: 200, backgroundColor: 'papayawhip' }}> 
                <h2 style={{ margin: 16}}> Some content</h2>
                <Loader loading={loading}/>
            </LoadingOverlay>
            
            <button onClick={() => this.setState({ loading: !loading })}>
              Toggle loader
            </button>
              
     
            <div style={{ width: 200, height: 200, backgroundColor: 'goldenrod' }}> 
                <h2 style={{ margin: 16}}>Other Content</h2>
            </div>
     
          </div>
        )
      }
    }
     
     
    render(<App />, document.getElementById('root'));
     

    Overlay on the entire page

    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).

    import React from 'react';
    import { Loader } from 'react-overlay-loader';
     
    import 'react-overlay-loader/styles.css';
     
     
    const App = () => (
      <div>
        <h2>Some content</h2>
        <div>
          <h3> Some nested content</h3>
          <div>
            <span>This loader will show over the entire page</span>
            <Loader fullPage loading />
          </div>
        </div>
      </div>
    );
     

    Spinner customization

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

    .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;
    }

    Install

    npm i react-overlay-loader

    DownloadsWeekly Downloads

    2,645

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • aakashns