@navinc/base-react-components/src/loading-dots.js

Nav's Pattern Library

import styled, { keyframes } from 'styled-components'

const Dot = styled.div`
  margin: 0.25em 0.3em;
  border-radius: 50%;
  height: 0.5em;
  width: 0.5em;
`

const fadeIn = keyframes`
  from { opacity: 1; }
  to { opacity: 0; }
`

const Dot1 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease infinite;
`

const Dot2 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease 0.15s infinite;
`

const Dot3 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease 0.3s infinite;
`
const colors = {
  purple: 'navPrimary',
  green: 'navStatusPositive',
  white: 'navNeutralLight',
}

export const Wrapper = styled.div`
  display: flex;
  color: ${({ dotColor, theme }) => theme[colors[dotColor]]};
  & > * {
    background-color: currentcolor;
  }
`
export const LoadingDots = (props) => (
  <Wrapper {...props}>
    <Dot1 />
    <Dot2 />
    <Dot3 />
  </Wrapper>
)

const StyledLoadingDots = styled(LoadingDots)``
export default StyledLoadingDots