@react-to-styled/loader/dist/esm/loader.js

Loader

import { Colors } from '@react-to-styled/essentials';
import React from 'react';
import styled, { keyframes } from 'styled-components';

const Loader = ({ wrapperHeight , loaderSize =72 ,  })=>{
    if (wrapperHeight) {
        return /*#__PURE__*/ React.createElement(Wrapper, {
            className: "rts-loader__container",
            wrapperHeight: wrapperHeight
        }, /*#__PURE__*/ React.createElement(Element, {
            className: "rts-loader",
            "data-element": "loader",
            loaderSize: loaderSize
        }));
    }
    return /*#__PURE__*/ React.createElement(Element, {
        className: "rts-loader",
        "data-element": "loader",
        loaderSize: loaderSize
    });
};
const loaderKeyframe = keyframes`
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
`;
const Wrapper = styled.div`
  width: 100%;
  ${({ wrapperHeight  })=>`height: ${typeof wrapperHeight === 'number' ? `${wrapperHeight}px` : wrapperHeight}`
};
  display: flex;
  align-items: center;
  justify-content: center;
`;
const Element = styled.div`
  width: 72px;
  height: 72px;
  border-radius: 50%;
  font-size: 10px;
  position: relative;
  border: 4px solid transparent;
  border-left-color: ${Colors.darkBlue};
  transform: translateZ(0);
  animation: ${loaderKeyframe} 1.1s infinite linear;
  ${({ loaderSize  })=>`
    width: ${loaderSize}px;
    height: ${loaderSize}px;
    
    ::after {
      width: ${loaderSize}px;
      height: ${loaderSize}px;
      border-radius: 50%;
    }
  `
};
`;

export { Loader };
//# sourceMappingURL=loader.js.map