Loading Indicator

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { COLORS } from 'constants/styles';

const shift = keyframes`
  0%{
    left: -60px
    opacity: 0;
    background-color: ${COLORS.YELLOW.YELLOW};
  }
  10% { 
    left: 0; 
    opacity: 1;
  }
  90% { 
    left: 100px; 
    opacity: 1;
  }
  100%{
    left: 160px;
    background-color: ${COLORS.RED.RED};
    opacity: 0;
  }
`;

const Loader = styled.div`
  width: 100px;
  height: 20px
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  > div {
    content: " ";
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute;
    animation: ${shift} 2s linear infinite;
    &:nth-of-type(1) { animation-delay: -.4s; }
    &:nth-of-type(2) { animation-delay: -.8s; }
    &:nth-of-type(3) { animation-delay: -1.2s; }
    &:nth-of-type(4) { animation-delay: -1.6s; }
  }
`;

class LoadingIndicator extends Component {
  render() {
    return (
      <Loader>
        <div />
        <div />
        <div />
        <div />
        <div />
      </Loader>
    );
  }
}

export default LoadingIndicator;