Output Spinner

import styled from "styled-components";
export default function OutputSpinner({
  className,
  style,
  size = "50px",
  bgColor = "#efefef",
  color = "#2F7FCA",
  borderWidth = "8px",
}) {
  return (
    <Styled
      style={style}
      size={size}
      bgColor={bgColor}
      color={color}
      borderWidth={borderWidth}
      className={className}
    ></Styled>
  );
}
const Styled = styled.div`
  border-radius: 50%;
  position: relative;
  transform: translateZ(0);
  animation: spin 1.1s infinite linear;
  width: ${({ size }) => size};
  height: ${({ size }) => size};
  border-left: ${({ borderWidth, color }) =>
    borderWidth + " solid " + (color)};
  border-right: ${({ borderWidth, bgColor }) =>
    borderWidth + " solid " + bgColor};
  border-top: ${({ borderWidth, bgColor }) =>
    borderWidth + " solid " + bgColor};
  border-bottom: ${({ borderWidth, bgColor }) =>
    borderWidth + " solid " + bgColor};
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

import OutputSpinner from "../../example/OutputSpinner";

export default function TestView() {
  return (
    <div className="test-view">
      <Spinner />
    </div>
  );
}