Just a fast prototype of CSS animated loading spinner

Sample-React-LoadingSpinner.js

const LoadingSpinner = () => (
  <div className="loadingSpinner">
    <style jsx>{`
      .loadingSpinner {
        display: inline-block;
        position: relative;
        width: 300px;
        height: 300px;
        transform: translateZ(0);
      }
      .loadingSpinner:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 6px;
        box-sizing: border-box;
        border: 122px solid blue;
        border-color: blue transparent blue transparent;
        animation: loadingSpinner 1.2s infinite;
      }
      @keyframes loadingSpinner {
        0% {
          transform: rotate(0);
          animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
        50% {
          transform: rotate(900deg);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        100% {
          transform: rotate(1800deg);
        }
      }
    `}</style>
  </div>
);

export default LoadingSpinner