import React from "react";
import styled, { keyframes } from "styled-components";

const Jump = keyframes`
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-16px);
  }
  40% {
    transform: translateY(0px);
  }
`;

const Wrapper = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Circle = styled.div`
  width: 16px;
  height: 16px;
  margin: 16px;
  border-radius: 100%;
  background-color: lightgrey;
  animation: ${Jump} 1.5s ease-in-out infinite
    ${props => 0.2 * props.delay}s;
`;

export default function Loader() {
  return (
    <Wrapper>
      <Circle delay={0} />
      <Circle delay={1} />
      <Circle delay={2} />
    </Wrapper>
  );
}