circle-preloader/dist/index.js

>

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var injectSheet = _interopDefault(require('react-jss'));

var styles = {

  preloaderContainer: {
    backgroundColor: function backgroundColor(props) {
      return props.backgroundColor;
    },
    opacity: function opacity(props) {
      return props.opacity;
    },
    position: 'fixed',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%'
  },
  outerBall: {
    backgroundColor: function backgroundColor(props) {
      return props.bg;
    },
    border: function border(props) {
      return '5px solid ' + props.outerColor;
    },
    borderTop: function borderTop(props) {
      return '5px solid rgba(0, 0, 0, 0)';
    },
    borderLeft: function borderLeft(props) {
      return '5px solid rgba(0, 0, 0, 0)';
    },
    boxShadow: function boxShadow(props) {
      return '0 0 35px ' + props.shadowColor;
    },
    opacity: function opacity(props) {
      return '0.9';
    },
    borderRadius: '50px',
    width: '50px',
    height: '50px',
    margin: ['0', 'auto'],
    animation: 'spin .5s infinite linear'
  },

  innerBall: {
    backgroundColor: function backgroundColor(props) {
      return props.bg;
    },
    border: function border(props) {
      return '5px solid ' + props.innerColor;
    },
    borderTop: function borderTop(props) {
      return '5px solid rgba(0, 0, 0, 0)';
    },
    borderLeft: function borderLeft(props) {
      return '5px solid rgba(0, 0, 0, 0)';
    },
    boxShadow: function boxShadow(props) {
      return '0 0 15px ' + props.shadowColor;
    },
    opacity: function opacity(props) {
      return '0.9';
    },
    borderRadius: '50px',
    width: '30px',
    height: '30px',
    margin: ['0', 'auto'],
    position: 'relative',
    top: '-50px',
    animation: 'spinoff .5s infinite linear'
  },

  '@keyframes spin': {
    '0%': {
      transform: 'rotate(0deg)'
    },

    '100%': {
      transform: 'rotate(360deg)'
    }

  },

  '@keyframes spinoff': {
    '0%': {
      transform: 'rotate(0deg)'
    },

    '100%': {
      transform: 'rotate(-360deg)'
    }

  }
};

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

/* eslint-disable react/no-unused-prop-types */

var Preloader = function (_React$Component) {
  inherits(Preloader, _React$Component);

  function Preloader() {
    classCallCheck(this, Preloader);
    return possibleConstructorReturn(this, (Preloader.__proto__ || Object.getPrototypeOf(Preloader)).apply(this, arguments));
  }

  createClass(Preloader, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          classes = _props.classes,
          visible = _props.visible,
          opacity = _props.opacity;

      return React.createElement(
        'div',
        { className: classes.preloaderContainer, style: { opacity: visible === false ? '0' : opacity, zIndex: visible === false ? '-9999' : '9999', transition: visible === false ? 'all .5s ease' : '' } },
        React.createElement(
          'div',
          null,
          React.createElement('div', { className: classes.outerBall }),
          React.createElement('div', { className: classes.innerBall })
        )
      );
    }
  }]);
  return Preloader;
}(React.Component);

Preloader.propTypes = {
  visible: PropTypes.bool,
  backgroundColor: PropTypes.string,
  opacity: PropTypes.string,
  shadowColor: PropTypes.string,
  outerColor: PropTypes.string,
  innerColor: PropTypes.string
};

Preloader.defaultProps = {
  visible: true,
  backgroundColor: 'rgb(0, 0, 0)',
  opacity: '1',
  shadowColor: '#2187e7',
  outerColor: 'rgb(0, 183, 229)',
  innerColor: 'rgb(0, 183, 229)'
};

var index = injectSheet(styles)(Preloader);

exports.Preloader = index;
//# sourceMappingURL=index.js.map