A components for displaying "loading" dots with CSS (for ReactJS and Styled Components)

Dots.js

// tools
import React from "react"
import styled from "styled-components"

// styles
const Dots = styled.span`
  &::after {
    display: inline-block;
    animation: ellipsis 1.25s infinite;
    content: ".";
    width: 1em;
    text-align: left;
  }

  @keyframes ellipsis {
    0% {
      content: ".";
    }
    33% {
      content: "..";
    }
    66% {
      content: "...";
    }
  }
`

// return
export default props => {
  return <Dots>{props.children}</Dots>
}

<3