2017-08-31 04:00:31 +00:00
|
|
|
import React from 'react';
|
2017-11-15 03:44:55 +00:00
|
|
|
import './Spinner.scss';
|
2017-08-31 04:00:31 +00:00
|
|
|
|
2017-11-15 03:44:55 +00:00
|
|
|
type Size = 'x1' | 'x2' | 'x3' | 'x4' | 'x5';
|
2017-08-31 04:00:31 +00:00
|
|
|
|
2017-09-25 02:06:28 +00:00
|
|
|
interface SpinnerProps {
|
|
|
|
size?: Size;
|
2017-11-15 03:44:55 +00:00
|
|
|
light?: boolean;
|
2017-09-25 02:06:28 +00:00
|
|
|
}
|
2017-08-31 04:00:31 +00:00
|
|
|
|
2017-11-15 03:44:55 +00:00
|
|
|
const Spinner = ({ size = 'x1', light = false }: SpinnerProps) => {
|
|
|
|
const color = light ? 'Spinner-light' : 'Spinner-dark';
|
|
|
|
return (
|
|
|
|
<svg className={`Spinner Spinner-${size} ${color}`} viewBox="0 0 50 50">
|
2017-12-18 23:29:26 +00:00
|
|
|
<circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="5" />
|
2017-11-15 03:44:55 +00:00
|
|
|
</svg>
|
|
|
|
);
|
2017-08-31 04:00:31 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Spinner;
|