loading spinner

loader.css

.load-container {
  display: none;
}

.loading .load-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 20px;
}

loader.js

class Loader extends React.Component {
    render() {
        return (
            <div className="load-container">
                <div>
                    <svg className="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"
                        style={{ width: '80px', height: '80px', animation: 'fa-spin 1s linear infinite', position: 'relative' }}>
                        <circle className="path" fill="transparent" strokeWidth="2" cx="33" cy="33" r="30" stroke="url(#dnx-loader-gradient)"></circle>
                        <linearGradient id="dnx-loader-gradient">
                            <stop offset="0%" stopOpacity="1" stopColor="#007bff"></stop>
                            <stop offset="80%" stopOpacity="0.7" stopColor="#007bff"></stop>
                            <stop offset="90%" stopOpacity="0.3" stopColor="#007bff"></stop>
                            <stop offset="100%" stopOpacity="0" stopColor="#007bff"></stop>
                        </linearGradient>
                    </svg>
                </div>
                <div style={{ marginTop: '18px' }}>Loading...</div>
            </div>
        )
    }
}