backpack-ui/dist/components/dotLoader/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

var _keyframes = require("../../utils/keyframes");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var styles = {
  container: {
    inline: {
      display: "inline-block"
    }
  },

  dot: {
    base: {
      animationDuration: "1s",
      animationIterationCount: "infinite",
      animationName: _keyframes.bookingLoaderFade,
      animationTimingFunction: "cubic-bezier(.68, -.55, .265, 1.55)",
      backgroundColor: "#bfd0d8",
      borderRadius: "50%",
      display: "inline-block",
      height: "10px",
      width: "10px"
    },

    second: {
      animationDelay: _settings.timing.default,
      marginLeft: "6px"
    },

    third: {
      animationDelay: _settings.timing.slow,
      marginLeft: "6px"
    }
  }
};

function DotLoader(_ref) {
  var inline = _ref.inline;

  return _react2.default.createElement(
    "div",
    { className: "DotLoader", style: [inline && styles.container.inline] },
    _react2.default.createElement("span", { style: styles.dot.base }),
    _react2.default.createElement("span", { style: [styles.dot.base, styles.dot.second] }),
    _react2.default.createElement("span", { style: [styles.dot.base, styles.dot.third] })
  );
}

DotLoader.propTypes = {
  inline: _react2.default.PropTypes.bool
};

DotLoader.defaultProps = {
  inline: false
};

DotLoader.styles = styles;

exports.default = (0, _radium2.default)(DotLoader);