react-loading-screen

A React loading screen. Сan be used as a screen saver for the initial download of the application or as an overload screen for promises.

DEMO

Installation

npm install --save react-loading-screen

The modular approach of this library means you're much better off building it into your code with a module bundling system like browserify or webpack.

Browser Support

Basically IE9+.

Usage

const LoadingScreen = require('react-loading-screen');
// ... or with es2015
import LoadingScreen from 'react-loading-screen';

Server side rendering

Library uses styled components, so follow official docs to configurate, it`s very simple, go to instructions

Examples

For details about why the examples work, read the API documentation below.

You can also see full code of demo by looking in example/.

import React from 'react'
//...
import LoadingScreen from '../react-loading-screen'

//...
  <LoadingScreen
    loading={true}
    bgColor='#f1f1f1'
    spinnerColor='#9ee5f8'
    textColor='#676767'
    logoSrc='/logo.png'
    text='Here an introduction sentence (Optional)'
  > 
    // ...
    // here loadable content
    // for example, async data
    //<div>Loadable content</div>
  </LoadingScreen>

API

module is represented by a single component, let's call it LoadingScreen, import as shown above

LoadingScreen

Root component, it includes three subcomponents, you can control them through properties

props

some of props are REQUIRED, if not mentioned prop is OPTIONAL.

loading { bool }: the content of the page is loaded or not (required parameter).

bgColor { string }: background color of loading sreen. deault #ffffff .

spinnerColor { string }: spinner color. If empty param - not showing.

textColor { string }: text under spinner. default #676767.

logoSrc { string }: url of image. If empty param - not showing.

text { string }: background color of loading sreen. If empty param - not showing.