react-dots-loader/src/index.js

A nice loader showing 3 animated dots - carefully crafted for React

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cleanProps from 'react-clean-props';
import InlineBlock from 'react-inline-block';

const CLASS_PREFIX = ' react-dots-loader';
const CIRCLE_CLASSNAME = ' ' + CLASS_PREFIX + '__circle';
const INDEXES = {
  0: 'one',
  1: 'two',
  2: 'three'
};

export default class Loader extends React.Component {
  render() {
    const props = this.props;

    if (props.visible == null || props.visible === false) {
      return null;
    }

    const className = ((props.className || '') + CLASS_PREFIX).trim();

    const circleStyle = {
      marginLeft: props.distance,
      width: props.size,
      height: props.size,
      background: props.color
    };

    const oneStyle = { ...circleStyle, marginLeft: 0 };
    const twoStyle = circleStyle;
    const threeStyle = circleStyle;

    return (
      <InlineBlock
        {...cleanProps(props, Loader.propTypes)}
        className={className}
        size={null}
        color={null}
      >
        {this.renderDot(0, oneStyle)}
        {this.renderDot(1, twoStyle)}
        {this.renderDot(2, threeStyle)}
      </InlineBlock>
    );
  }

  renderDot(index, style) {
    const className =
      CIRCLE_CLASSNAME + CIRCLE_CLASSNAME + '--' + INDEXES[index];
    const props = {
      style: style,
      className: className
    };

    let result;

    if (typeof this.props.renderDot === 'function') {
      result = this.props.renderDot(props);
    }

    if (result === undefined) {
      result = <InlineBlock {...props} />;
    }

    return result;
  }
}

Loader.defaultProps = {
  visible: true,
  distance: 10,
  size: 18
};
Loader.propTypes = {
  visible: PropTypes.bool,
  distance: PropTypes.number,
  size: PropTypes.number,
  renderDot: PropTypes.func
};