spinner.jsx

import React from 'react'
import { number, string } from 'prop-types'

const Spinner = ({ size, ratio, color }) => {
  const c = size / 2
  const r = size / 4
  const d = size / ratio

  return (
    <svg width={size} height={size} className="spin">
      <path
        d={`m ${d} ${c} A ${r} ${r} 0 0 0 ${size - d} ${c}`}
        stroke={color}
        fill="none"
        strokeWidth={d}
      />
    </svg>
  )
}

Spinner.propTypes = {
  size: number,
  ratio: number,
  color: string,
}

Spinner.defaultProps = {
  size: 50,
  ratio: 15,
  color: 'black',
}

export default Spinner