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

import './style/index.css'

const SpinnerDiv = styled.div`
  width: 30px;
`

const Item = styled.div`
  background-color: #d20000;
  height: 100%;
  width: 2px;
  margin: 2px;
  display: inline-block;
  border-radius: 12px;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;

  &.rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }

  &.rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  &.rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  &.rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
`

export default class Loading extends PureComponent<{ className: string }> {
  public render() {
    return (
      <SpinnerDiv className={this.props.className}>
        <Item className="rect1" />
        <Item className="rect2" />
        <Item className="rect3" />
        <Item className="rect4" />
        <Item className="rect5" />
      </SpinnerDiv>
    )
  }
}