import PropTypes from 'prop-types';
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import { prop } from '../../Tools/interpolation';
var scaleDelay =
/*#__PURE__*/
keyframes(["\n  0%,\n  50%,\n  100% { transform: scale3d(1, 1, 1); }\n  25% { transform: scale3d(0, 0, 1); }\n"]);
var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1rjj03o-0"
})(["\n  position: relative;\n  width: ", ";\n  height: ", ";\n"], prop('size'), prop('size'));
var Container =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1rjj03o-1"
})(["\n  width: 70%;\n  height: 70%;\n  transform-origin: 85% 35%;\n  transform: rotate(-45deg);\n  border-radius: 10%;\n  overflow: hidden;\n"]);
var Square =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1rjj03o-2"
})(["\n  display: inline-block;\n  width: 20%;\n  height: 20%;\n  float: left;\n  border: 0;\n  animation: ", " 3s infinite ease-in-out;\n"], scaleDelay);
var SquareA =
/*#__PURE__*/
styled(Square).withConfig({
  componentId: "sc-1rjj03o-3"
})(["\n  background-color: #153a62;\n"]);
var SquareB =
/*#__PURE__*/
styled(Square).withConfig({
  componentId: "sc-1rjj03o-4"
})(["\n  background-color: #799eb2;\n"]);
var SquareC =
/*#__PURE__*/
styled(Square).withConfig({
  componentId: "sc-1rjj03o-5"
})(["\n  background-color: #3558a8;\n"]);
var SquareD =
/*#__PURE__*/
styled(Square).withConfig({
  componentId: "sc-1rjj03o-6"
})(["\n  background-color: #b2d5e5;\n"]);
var SquareE =
/*#__PURE__*/
styled(Square).withConfig({
  componentId: "sc-1rjj03o-7"
})(["\n  background-color: #10ade4;\n"]);
var Square1 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-8"
})(["\n  animation-delay: 0s;\n"]);
var Square2 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-9"
})(["\n  animation-delay: 0.1s;\n"]);
var Square3 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-10"
})(["\n  animation-delay: 0.2s;\n"]);
var Square4 =
/*#__PURE__*/
styled(SquareB).withConfig({
  componentId: "sc-1rjj03o-11"
})(["\n  animation-delay: 0.3s;\n"]);
var Square5 =
/*#__PURE__*/
styled(SquareB).withConfig({
  componentId: "sc-1rjj03o-12"
})(["\n  animation-delay: 0.4s;\n"]);
var Square6 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-13"
})(["\n  animation-delay: 0.1s;\n"]);
var Square7 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-14"
})(["\n  animation-delay: 0.2s;\n"]);
var Square8 =
/*#__PURE__*/
styled(SquareA).withConfig({
  componentId: "sc-1rjj03o-15"
})(["\n  animation-delay: 0.3s;\n"]);
var Square9 =
/*#__PURE__*/
styled(SquareB).withConfig({
  componentId: "sc-1rjj03o-16"
})(["\n  animation-delay: 0.4s;\n"]);
var Square10 =
/*#__PURE__*/
styled(SquareB).withConfig({
  componentId: "sc-1rjj03o-17"
})(["\n  animation-delay: 0.5s;\n"]);
var Square11 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-18"
})(["\n  animation-delay: 0.2s;\n"]);
var Square12 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-19"
})(["\n  animation-delay: 0.3s;\n"]);
var Square13 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-20"
})(["\n  animation-delay: 0.4s;\n"]);
var Square14 =
/*#__PURE__*/
styled(SquareC).withConfig({
  componentId: "sc-1rjj03o-21"
})(["\n  animation-delay: 0.5s;\n"]);
var Square15 =
/*#__PURE__*/
styled(SquareC).withConfig({
  componentId: "sc-1rjj03o-22"
})(["\n  animation-delay: 0.6s;\n"]);
var Square16 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-23"
})(["\n  animation-delay: 0.3s;\n"]);
var Square17 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-24"
})(["\n  animation-delay: 0.4s;\n"]);
var Square18 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-25"
})(["\n  animation-delay: 0.5s;\n"]);
var Square19 =
/*#__PURE__*/
styled(SquareC).withConfig({
  componentId: "sc-1rjj03o-26"
})(["\n  animation-delay: 0.6s;\n"]);
var Square20 =
/*#__PURE__*/
styled(SquareC).withConfig({
  componentId: "sc-1rjj03o-27"
})(["\n  animation-delay: 0.7s;\n"]);
var Square21 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-28"
})(["\n  animation-delay: 0.4s;\n"]);
var Square22 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-29"
})(["\n  animation-delay: 0.5s;\n"]);
var Square23 =
/*#__PURE__*/
styled(SquareE).withConfig({
  componentId: "sc-1rjj03o-30"
})(["\n  animation-delay: 0.6s;\n"]);
var Square24 =
/*#__PURE__*/
styled(SquareD).withConfig({
  componentId: "sc-1rjj03o-31"
})(["\n  animation-delay: 0.7s;\n"]);
var Square25 =
/*#__PURE__*/
styled(SquareD).withConfig({
  componentId: "sc-1rjj03o-32"
})(["\n  animation-delay: 0.8s;\n"]);

var BlockchainLoader = function BlockchainLoader(props) {
  return React.createElement(Wrapper, props, React.createElement(Container, null, React.createElement(Square1, null), React.createElement(Square2, null), React.createElement(Square3, null), React.createElement(Square4, null), React.createElement(Square5, null), React.createElement(Square6, null), React.createElement(Square7, null), React.createElement(Square8, null), React.createElement(Square9, null), React.createElement(Square10, null), React.createElement(Square11, null), React.createElement(Square12, null), React.createElement(Square13, null), React.createElement(Square14, null), React.createElement(Square15, null), React.createElement(Square16, null), React.createElement(Square17, null), React.createElement(Square18, null), React.createElement(Square19, null), React.createElement(Square20, null), React.createElement(Square21, null), React.createElement(Square22, null), React.createElement(Square23, null), React.createElement(Square24, null), React.createElement(Square25, null)));
};

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