Loading screen example for react
npm install react-loading-screen
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
`js
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, its very simple, go to instructions
example/.
js
import React from 'react'
//...
import LoadingScreen from '../react-loading-screen'
//...
loading={true}
bgColor='#f1f1f1'
spinnerColor='#9ee5f8'
textColor='#676767'
logoSrc='/logo.png'
text='Here an introduction sentence (Optional)'
>
// ...
// here loadable content
// for example, async data
//Loadable content
`
API
module is represented by a single component, let's call it LoadingScreen, import as shown above
$3
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`.