index.js

import Loader from './Loader'

// Simple ...
<Loader />

// Custom text
<Loader text="Wait for it" />

// Custom sign
<Loader sign="❤" />

// You can change max number of `dots`
<Loader max={10} />

// To slow? To fast?
<Loader interval={100} />

Loader.js

import React, { PropTypes } from 'react'
import { pure, mapProps, compose, withState, lifecycle, setDisplayName, setPropTypes, defaultProps, onlyUpdateForPropTypes } from 'recompose'
import { repeat } from 'lodash'

export default pure(
  compose(
    setDisplayName('Loader'),
    onlyUpdateForPropTypes,
    setPropTypes({
      sign: PropTypes.string,
      interval: PropTypes.number,
      max: PropTypes.number,
      text: PropTypes.string
    }),
    defaultProps({
      sign: '.',
      interval: 200,
      max: 3,
      text: 'Loading'
    }),
    withState('dotsCount', 'setDotsCount', 1),
    withState('timer', 'setTimer', null),
    mapProps(
      ({ setDotsCount, max, ...rest }) => ({
        tick: () => setDotsCount(n => (n + 1) % (max + 1)),
        ...rest
      })
    ),
    lifecycle(
      (c) => setTimeout(() => c.props.setTimer(setInterval(c.props.tick, c.props.interval)), 0),
      (c) => clearInterval(c.props.timer)
    )
  )(({ text, sign, dotsCount }) => <div>{ text } { repeat(sign, dotsCount) }</div>)
)