SVG Spinner

spinner.tsx

export const ArtSpinner = ({ name }: { name?: string }): React.JSX.Element => {
  const classes = {
    element: joinArray([
      'art-spinner',
      name && `art-${name}--spinner`,
    ]),
    circle: joinArray([
      'art-spinner--circle',
      name && `art-${name}--spinner-circle`,
    ]),
    progress: joinArray([
      'art-spinner--progress',
      name && `art-${name}--spinner-progress`,
    ]),
  }

  return (
    <svg className={classes.element} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path className={classes.circle} fill-rule="evenodd" clip-rule="evenodd" d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28ZM16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#E6E6E6" />
      <path className={classes.progress} fill-rule="evenodd" clip-rule="evenodd" d="M14 2C14 0.89543 14.8954 0 16 0C24.8366 0 32 7.16344 32 16C32 17.1046 31.1046 18 30 18C28.8954 18 28 17.1046 28 16C28 9.37258 22.6274 4 16 4C14.8954 4 14 3.10457 14 2Z" fill="#00AFF0" />
    </svg>
  )
}