{"version":3,"sources":["../../../src/Loader/Loader.tsx"],"names":[".ls1js6w",".c15wwp9r"],"mappings":"AAKMA;AAWAC","file":"../../../src/Loader/Loader.tsx","sourcesContent":["import React from \"react\";\nimport { css } from \"linaria\";\nimport { colors } from \"../utils\";\nimport \"../utils/global\";\n\nconst LoaderBase = css`\n  width: 60px;\n  height: 60px;\n  border-radius: 100%;\n  display: inline-block;\n  position: relative;\n  vertical-align: middle;\n  * {\n    box-sizing: border-box;\n  }\n`;\nconst Circle = css`\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 100%;\n  border: calc(60px / 10) solid transparent;\n  border-top-color: #8884ff;\n  animation: half-circle-spinner-animation 1000ms infinite;\n  &:not(:first-child) {\n    animation-direction: alternate;\n  }\n  @keyframes half-circle-spinner-animation {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport interface LoaderProps {\n  size?: number;\n  color?: string;\n  animationDuration?: number;\n  className?: string;\n}\n\nconst Loader: React.FC<LoaderProps> = ({\n  size = 60,\n  color = colors[\"color-primary\"],\n  animationDuration = 1000,\n  className,\n}) => (\n  <div\n    className={`${LoaderBase}${className ? ` ${className}` : \"\"}`}\n    style={{ width: size, height: size }}>\n    <div\n      className={Circle}\n      style={{\n        borderWidth: size / 10,\n        animationDuration: `${animationDuration}ms`,\n        borderTopColor: color,\n      }}\n    />\n    <div\n      className={Circle}\n      style={{\n        borderWidth: size / 10,\n        animationDuration: `${animationDuration}ms`,\n        borderTopColor: color,\n      }}\n    />\n  </div>\n);\n\nexport default Loader;\n"]}