add size option to circle component

Author: JoshK2

src/components/Circle/index.js

@@ -4,15 +4,19 @@ import './style.css'
 
 export default class Circle extends Component {
     render() {
-        return <div className="lds-circle" style={{ background: this.props.color }}></div>
+        const { color, size } = this.props;
+        return <div className="lds-circle" style={{ background: color, width: size, height: size }}></div>
     }
 }
 
 Circle.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** size in pixel */
+    size: PropTypes.number,
 }
 
 Circle.defaultProps = {
     color: '#7f58af',
+    size: 64,
 }

src/components/Circle/style.css

@@ -1,7 +1,5 @@
 .lds-circle {
     display: inline-block;
-    width: 64px;
-    height: 64px;
     margin: 8px;
     border-radius: 50%;
     animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;