import React from "react";
import styled from "styled-components";

const Loader = () => {
  return (
    <StyledWrapper>
      <div className="loader">
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
        <div className="circle"><div className="dot" /><div className="outline" /></div>
      </div>
    </StyledWrapper>
  );
};

const StyledWrapper = styled.div`
  .loader {
    display: flex;
    justify-content: center;
    align-items: center;
    --animation: 2s ease-in-out infinite;
  }

  .circle {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: circle var(--animation);
  }

  .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: dot var(--animation);
  }

  .outline {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: outline var(--animation);
  }

  .circle:nth-child(1) { --c: #4285f4; border-color: var(--c); }
  .circle:nth-child(1) .dot { background: var(--c); }

  .circle:nth-child(2) { --c: #ea4335; border-color: var(--c); animation-delay: .3s; }
  .circle:nth-child(2) .dot { background: var(--c); animation-delay: .3s; }

  .circle:nth-child(3) { --c: #fbbc05; border-color: var(--c); animation-delay: .6s; }
  .circle:nth-child(3) .dot { background: var(--c); animation-delay: .6s; }

  .circle:nth-child(4) { --c: #34a853; border-color: var(--c); animation-delay: .9s; }
  .circle:nth-child(4) .dot { background: var(--c); animation-delay: .9s; }

  @keyframes circle {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
  }

  @keyframes dot {
    0%,100% { transform: scale(1); }
    50% { transform: scale(0); }
  }

  @keyframes outline {
    0% { transform: scale(0); outline: 20px solid var(--c); opacity: 1; }
    100% { transform: scale(1); outline: 0 solid transparent; opacity: 0; }
  }
`;

export default Loader;