import * as React from 'react';
import PropTypes from 'prop-types';
import styled, { keyframes } from 'styled-components';
import { prop, theme } from '../../Tools/interpolation';
var bounceAnimation =
/*#__PURE__*/
keyframes(["\n  0%,\n  100% { transform: scale(0); }\n  50% { transform: scale(1); }\n"]);
var Container =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "kz3e8i-0"
})(["\n  position: relative;\n  width: ", ";\n  height: ", ";\n"], prop('size'), prop('size'));
var Circle1 =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "kz3e8i-1"
})(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  opacity: 0.7;\n  background-color: ", ";\n  animation: ", " 2s infinite ease-in-out;\n"], theme('loaderColor'), bounceAnimation);
var Circle2 =
/*#__PURE__*/
styled(Circle1).withConfig({
  componentId: "kz3e8i-2"
})(["\n  animation-delay: -1s;\n"]);

var HeartbeatLoader = function HeartbeatLoader(props) {
  return React.createElement(Container, props, React.createElement(Circle1, null), React.createElement(Circle2, null));
};

HeartbeatLoader.propTypes = process.env.NODE_ENV !== "production" ? {
  size: PropTypes.string.isRequired
} : {};
HeartbeatLoader.defaultProps = {
  size: '40px'
};
export default HeartbeatLoader;