import React from 'react' ; import styled , { keyframes } from 'styled-components' ; import style from 'assets/globalStyle' ; const loading = keyframes `
  0%, 100% {
    transform: scale(0.0);
  }
  50% {
    transform: scale(1.0);
  }
` ; const LoadingWrapper = styled . div `
  > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    opacity: 0.6;
    border-radius: 50%;
    background-color: ${ style [ 'theme-color' ] };
    animation: ${ loading } 1.4s infinite ease-in;
  }
  > div:nth-child(2) {
    animation-delay: -0.7s;
  }
` ; function Loading ( ) { return ( < LoadingWrapper > < div > < /div> < div > < /div> < /LoadingWrapper>); } export default React . memo ( Loading ) ;