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

Nav's Pattern Library

import React from 'react'
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;
`

export const Wrapper = styled.div`
  display: flex;

  & > * {
    background-color: currentcolor;
  }
`
export const LoadingDots = (props) => (
  <Wrapper {...props}>
    <Dot1 />
    <Dot2 />
    <Dot3 />
  </Wrapper>
)

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