Loading spinner, centred on a page, in React. Designed for use with creative-tim material kit pro, but could be adapted.

LoadingPage.js

import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import withStyles from '@material-ui/core/styles/withStyles'

import CircularProgress from '@material-ui/core/CircularProgress'

import FullArea from 'components/FullArea'
import GridContainer from 'components/Grid/GridContainer'
import GridItem from 'components/Grid/GridItem'

import loadingPageStyle from '../../assets/jss/material-kit-pro-react/components/loadingPageStyle'


const image = require('assets/img/map.jpg')


class LoadingPage extends Component {
  render() {
    const { classes } = this.props
    return (
      <FullArea id="fullarea" vertical>
        <div style={{
          width: 'inherit',
          height: 'inherit',
          backgroundImage: `url(${image})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}>
          <GridContainer
            direction="row"
            justify="center"
            alignItems="center"
            className={classNames(classes.loaderContainer, classes.loaderFilter)}
          >
            <GridItem>
              <GridContainer
                direction="row"
                justify="center"
                alignItems="center"
                className={classes.loaderContainer}
              >
                <GridItem className={classNames(classes.loaderItem, classes.loaderSpinner)} >
                  <CircularProgress className={classes.progress} color="white" />
                </GridItem>
                <GridItem className={classNames(classes.loaderItem, classes.loaderText)} >
                  {this.props.message}
                </GridItem>
              </GridContainer>
            </GridItem>
          </GridContainer>
        </div>
      </FullArea>
    )
  }
}

LoadingPage.propTypes = {
  message: PropTypes.string,
}

LoadingPage.defaultProps = {
  message: 'Loading page...',
}

export default withStyles(loadingPageStyle)(LoadingPage)

loadingPageStyle.jsx

// import parallaxStyle from "assets/jss/material-kit-pro-react/components/parallaxStyle.jsx";
const loadingPageStyle = {
  loaderFilter: {
    background: "rgba(0, 0, 0, 0.5)",
    zIndex: "1",
  },
  loaderContainer: {
    height: 'inherit',
  },
  loaderItem: {
    textAlign: 'center',
  },
  loaderSpinner: {
    color: '#ffffff',
  },
  loaderText: {
    color: '#ffffff',
  },
}

export default loadingPageStyle

LoadingSpinner.js

import React, { Component } from 'react'
import { Col, Row } from 'reactstrap'
import PropTypes from 'prop-types'


class LoadingSpinner extends Component {
  render() {
    return (
      <div className="d-flex align-items-center justify-content-center" style={{ height: '20vh' }} >
        <div className="placeholder" >
          <h4>
            <i className="fa fa-spinner fa-pulse loading-spinner" style={{ marginRight: '1rem' }} />
          </h4>
        </div>
        <div className="placeholder" >
          <h5>
            {this.props.message}
          </h5>
        </div>
      </div>
    )
  }
}

LoadingSpinner.propTypes = {
  message: PropTypes.string,
}

LoadingSpinner.defaultProps = {
  message: '',
}

export default LoadingSpinner