A basic loading indicator

react-loading.js

import React from 'react';
import PropTypes from 'prop-types';

function Loading({ size, fullScreen, isGold }) {
  const style = {
    borderWidth: `${size / 10}px`,
    width: `${size}px`,
    height: `${size}px`,
  };
  if (fullScreen) {
    return (
      <div className="center-absolute">
        <div className="loader" style={style} />
      </div>
    );
  }
  return <div className="loader" style={style} />;
}

Loading.propTypes = {
  size: PropTypes.number,
  fullScreen: PropTypes.bool,
  isGold: PropTypes.bool,
};

Loading.defaultProps = {
  size: 50,
  fullScreen: false,
};

export default Loading;

Required CSS:

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.gpu {
  backface-visibility: hidden;
  perspective: 1000;
  transform: translateZ(0);
}

.center-absolute {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border-style: solid;
  border-color: #f3f3f3;
  animation: spin 1s linear infinite;
  border-top-color: #555;
  border-radius: 50%;
}