font-awesome-based-react-loading-component.jsx

import React from 'react';

class Loading extends React.Component {
  render() {
    return (
      <div style={{
        position: "fixed",
        width: "100%",
        height: "100%",
        top: "0",
        left: "0",
        right: "0",
        bottom: "0",
        backgroundColor: "rgba(0,0,0,0.3)",
        zIndex: "1",
      }}>
        <div style={{
          position: "fixed",
          top: "50%",
          right: "50%",
          transform: "translate(50%,-50%)",
          zIndex: "2",
          color: "white",
        }}>
          <div style={{
            fontSize: "4em",
          }}>
            {this.props.text}
          </div>
          <div className="fa-10x text-center">
            <i className="fas fa-spinner fa-pulse">
            </i>
          </div>
        </div>
      </div>
    );
  }
}

export default Loading;