@cloudscape_innovation/react-images-viewer/lib/components/Spinner.js

Create an react-images-viewer component.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _noImportant = require("aphrodite/no-important");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var Spinner = function Spinner(props) {
  var classes = _noImportant.StyleSheet.create(styles(props));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: (0, _noImportant.css)(classes.bouncingLoader),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _noImportant.css)(classes.child)
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _noImportant.css)(classes.child, classes.child2)
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _noImportant.css)(classes.child, classes.child3)
    })]
  });
};
Spinner.propTypes = {
  color: _propTypes.default.string,
  size: _propTypes.default.number
};
var bouncingKeyframes = function bouncingKeyframes(size) {
  return {
    '0%': {
      opacity: 1,
      transform: 'translateY(0)'
    },
    '100%': {
      opacity: .1,
      transform: "translateY(-".concat(size, "px)")
    }
  };
};
var styles = function styles(_ref) {
  var color = _ref.color,
    size = _ref.size;
  return {
    bouncingLoader: {
      display: 'flex',
      justifyContent: 'center'
    },
    child: {
      width: size,
      height: size,
      margin: "".concat(3 * size, "px ").concat(.2 * size, "px"),
      background: color,
      borderRadius: '50%',
      animationName: bouncingKeyframes(size),
      animationDuration: '.6s',
      animationDirection: 'alternate',
      animationIterationCount: 'infinite'
    },
    child2: {
      animationDelay: '0.2s'
    },
    child3: {
      animationDelay: '0.4s'
    }
  };
};
var _default = exports.default = Spinner;