使用styled-components封装Loading组件

import React from 'react'
import styled, { keyframes } from 'styled-components'

const Wrapper = styled.div`
  margin: 100px auto;  
  display: flex;
  justify-content: center;
  align-items: center;
`

interface IRectangleProps {
  delay: number
}

const stretchHeight = keyframes`
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
`

const Rectangle = styled.div`
  width: 6px; height: 60px;
  background-color: #da0f47;
  animation-name: ${stretchHeight};
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.2s;
  animation-delay: ${(props: IRectangleProps) => props.delay + 's'}
`

function Loading() {
  return (
    <Wrapper>
      <Rectangle delay={0} />
      <Rectangle delay={-1.1} />
      <Rectangle delay={-1.0} />
      <Rectangle delay={-0.9} />
      <Rectangle delay={-0.8} />
    </Wrapper>
  )
}

export default Loading