BounceLoader.js

BounceLoader.js

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

// we create our bounce effect with the below keyframe
const bounce = keyframes`
  0%, 75%, 100% {
    transform: translateY(0px)
  } 
  25% {
    transform: translateY(-30px)
  }
`;

// we create our BounceLoader div with all the relevent styles and props we are concerned with changing
// feel free to add additional props to other attributes you may want to have the ability to change when using the loader
const BounceLoader = styled.div`
  display: flex;
  align-items: center;

  span {
    margin: ${props =>
      props.spaceBetween ? `0 ${props.spaceBetween}px` : "0 10px"};
    display: block;
    width: ${props => (props.width ? `${props.width}px` : "20px")};
    height: ${props => (props.height ? `${props.height}px` : "20px")};
    border-radius: 50%;
    background: ${props => (props.pColor ? props.pColor : "red")};

    &:nth-child(1) {
      animation: ${bounce} 1s ease-in-out infinite;
    }

    &:nth-child(2) {
      animation: ${bounce} 1s ease-in-out 0.33s infinite;
    }

    &:nth-child(3) {
      animation: ${bounce} 1s ease-in-out 0.66s infinite;
    }
  }
`;

// we export our BounceLoader and pass it all the relevant props passed in
export default ({ loading, ...props }) =>
  loading ? (
    <BounceLoader {...props}>
      <span />
      <span />
      <span />
    </BounceLoader>
  ) : null;