text: import React from 'react'
  import styled, { keyframes } from 'styled-components'
  
  
  const load2 = keyframes`
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  `
  const Spinner = styled.div`
      border-radius: 50%;
      color: ${props => props.theme.primaryColor};
      font-size: 11px;
      text-indent: -99999em;
      position: absolute;
      width: 10em;
      height: 10em;
      box-shadow: inset 0 0 0 1em;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      top: 50%;
      left: 50%;
      margin-top: -5em;
      margin-left: -5em;
      &:before{
          position: absolute;
          content: '';
          border-radius: 50%;
          width: 5.2em;
          height: 10.2em;
          background: #eee;
          border-radius: 10.2em 0 0 10.2em;
          top: -0.1em;
          left: -0.1em;
          -webkit-transform-origin: 5.2em 5.1em;
          transform-origin: 5.2em 5.1em;
          -webkit-animation: ${load2} 2s infinite ease 1.5s;
          animation: ${load2} 2s infinite ease 1.5s;
      }
      &:after{
          position: absolute;
          content: '';
          border-radius: 50%;
          width: 5.2em;
          height: 10.2em;
          background: #eee;
          border-radius: 0 10.2em 10.2em 0;
          top: -0.1em;
          left: 5.1em;
          -webkit-transform-origin: 0px 5.1em;
          transform-origin: 0px 5.1em;
          -webkit-animation: ${load2} 2s infinite ease;
          animation: ${load2} 2s infinite ease;
      }
  `
  
  
  const spinner = () =>(
      <Spinner>Loading...</Spinner>
  )
  
  export default spinner