import React from 'react' ; import styled , { keyframes } from 'styled-components' ; import style from 'assets/globalStyle' ; const dance = keyframes `
    0%, 40%, 100%{
      transform: scaleY(0.4);
      transform-origin: center 100%;
    }
    20%{
      transform: scaleY(1);
    }
` ; const Loading = styled . div `
  height: 10px;
  width: 100%;
  margin: auto;
  text-align: center;
  font-size: 10px;
  > div {
    display: inline-block;
    background-color: ${ style [ 'theme-color' ] };
    height: 100%;
    width: 1px;
    margin-right: 2px;
    animation: ${ dance } 1s infinite;
  }
  > div:nth-child(2) {
    animation-delay: -0.4s;
  }
  > div:nth-child(3) {
    animation-delay: -0.6s;
  }
  > div:nth-child(4) {
    animation-delay: -0.5s;
  }
  > div:nth-child(5) {
    animation-delay: -0.2s;
  }
` ; function LoadingV2 ( ) { return ( < Loading > < div > < /div> < div > < /div> < div > < /div> < div > < /div> < div > < /div> < span > 拼命加载中 ... < /span> < /Loading>); } export default React . memo ( LoadingV2 ) ;