react-simple-dots-loader/dist/index.es.js

A very simple animated loader effect

import React, { Component } from 'react';
import PropTypes from 'prop-types';

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = "/* add css styles here (optional) */\n\n.styles_dribble__1KO2Q {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 142px;\n  height: 40px;\n  margin: -20px 0 0 -71px;\n  background: #fff;\n  filter: contrast(20);\n}\n.styles_dribble__1KO2Q .styles_point__3Zkx4 {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  top: 12px;\n  left: 15px;\n  filter: blur(4px);\n  /* background: #000; */\n  border-radius: 50%;\n  transform: translateX(0);\n  animation: styles_point__3Zkx4 2.8s infinite;\n}\n.styles_dribble__1KO2Q .styles_points__DywJC {\n  transform: translateX(0);\n  margin-top: 12px;\n  margin-left: 31px;\n  animation: styles_points__DywJC 2.8s infinite;\n}\n.styles_dribble__1KO2Q .styles_points__DywJC span {\n  display: block;\n  float: left;\n  width: 16px;\n  height: 16px;\n  margin-left: 16px;\n  filter: blur(4px);\n  /* background: #000; */\n  border-radius: 50%;\n}\n@-moz-keyframes styles_point__3Zkx4 {\n  50% {\n    transform: translateX(96px);\n  }\n}\n@-webkit-keyframes styles_point__3Zkx4 {\n  50% {\n    transform: translateX(96px);\n  }\n}\n@-o-keyframes styles_point__3Zkx4 {\n  50% {\n    transform: translateX(96px);\n  }\n}\n@keyframes styles_point__3Zkx4 {\n  50% {\n    transform: translateX(96px);\n  }\n}\n@-moz-keyframes styles_points__DywJC {\n  50% {\n    transform: translateX(-31px);\n  }\n}\n@-webkit-keyframes styles_points__DywJC {\n  50% {\n    transform: translateX(-31px);\n  }\n}\n@-o-keyframes styles_points__DywJC {\n  50% {\n    transform: translateX(-31px);\n  }\n}\n@keyframes styles_points__DywJC {\n  50% {\n    transform: translateX(-31px);\n  }\n}\n\n";
var styles = { "dribble": "styles_dribble__1KO2Q", "point": "styles_point__3Zkx4", "points": "styles_points__DywJC" };
styleInject(css);

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;
};

var SimpleLoader = function (_Component) {
  inherits(SimpleLoader, _Component);

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

  createClass(SimpleLoader, [{
    key: 'render',
    value: function render() {
      var color = this.props.color;


      return React.createElement(
        'div',
        { className: styles.dribble },
        React.createElement('span', { className: styles.point, style: { backgroundColor: color } }),
        React.createElement(
          'div',
          { className: styles.points },
          React.createElement('span', { style: { backgroundColor: color } }),
          React.createElement('span', { style: { backgroundColor: color } }),
          React.createElement('span', { style: { backgroundColor: color } })
        )
      );
    }
  }]);
  return SimpleLoader;
}(Component);

SimpleLoader.propTypes = {
  color: PropTypes.string
};

export default SimpleLoader;
//# sourceMappingURL=index.es.js.map