import { keyframes } from "@emotion/react"; type Props = JSX.IntrinsicElements["svg"] & { size?: number | "1em"; }; export const Spinner: React.FC<Props> = ({ size = "1em", ...rest }) => ( <svg viewBox="0 0 50 50" css={{ width: size, height: size, animation: `2s linear infinite none ${keyframes({ "0%": { transform: "rotate(0)" }, "100%": { transform: "rotate(360deg)" }, })}`, "& > circle": { fill: "none", stroke: "black", strokeWidth: 4, strokeDasharray: 83, // 2/3 of circumference strokeLinecap: "round", }, }} {...rest} > <circle cx="25" cy="25" r="20" /> </svg> );