Add size to default spinner

Author: GuilhermeJSilva

README.md

@@ -35,7 +35,7 @@ Component that accepts `size` prop have a default size in pixel.
 | Spinner          | color: string | size: number  | className: string | style: object |
 | ---------------- | ------------  | ------------- | ----------------- | ------------- |
 | `<Circle/>`      | `#7f58af`     | `64`          | `""`              | `{}`          |
-| `<Default/>`     | `#7f58af`     | -             | `""`              | `{}`          |
+| `<Default/>`     | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Ellipsis/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<DualRing/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Facebook/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |

src/components/Default/index.js

@@ -2,11 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default function Default({ color, className, style }) {
-    const circles = [...Array(12)].map((_, index) => <div key={index} style={{ background: `${color}` }} />)
+export default function Default({ color, className, style, size }) {
+    const circles = [...Array(12)].map((_, index) => (
+        <div key={index} style={{ background: `${color}`, width: size * 0.075, height: size * 0.075 }} />
+    ))
 
     return (
-        <div className={`lds-default ${className}`} style={{ ...style }}>
+        <div className={`lds-default ${className}`} style={{ height: size, width: size, ...style }}>
             {circles}
         </div>
     )
@@ -15,6 +17,8 @@ export default function Default({ color, className, style }) {
 Default.propTypes = {
     /** hex color */
     color: PropTypes.string,
+    /** size in pixel */
+    size: PropTypes.number,
     /** class name  */
     className: PropTypes.string,
     /** style object */
@@ -23,6 +27,7 @@ Default.propTypes = {
 
 Default.defaultProps = {
     color: '#7f58af',
+    size: 80,
     className: '',
     style: {},
 }

src/components/Default/style.css

@@ -14,63 +14,63 @@
   }
   .lds-default div:nth-child(1) {
     animation-delay: 0s;
-    top: 37px;
-    left: 66px;
+    top: 46.25%;
+    left: 82.5%;
   }
   .lds-default div:nth-child(2) {
     animation-delay: -0.1s;
-    top: 22px;
-    left: 62px;
+    top: 27.5%;
+    left: 77.5%;
   }
   .lds-default div:nth-child(3) {
     animation-delay: -0.2s;
-    top: 11px;
-    left: 52px;
+    top: 13.75%;
+    left: 65%;
   }
   .lds-default div:nth-child(4) {
     animation-delay: -0.3s;
-    top: 7px;
-    left: 37px;
+    top: 8.75%;
+    left: 46.25%;
   }
   .lds-default div:nth-child(5) {
     animation-delay: -0.4s;
-    top: 11px;
-    left: 22px;
+    top: 13.75%;
+    left: 27.5%;
   }
   .lds-default div:nth-child(6) {
     animation-delay: -0.5s;
-    top: 22px;
-    left: 11px;
+    top: 27.5%;
+    left: 13.75%;
   }
   .lds-default div:nth-child(7) {
     animation-delay: -0.6s;
-    top: 37px;
-    left: 7px;
+    top: 46.25%;
+    left: 8.75%;
   }
   .lds-default div:nth-child(8) {
     animation-delay: -0.7s;
-    top: 52px;
-    left: 11px;
+    top: 65%;
+    left: 13.75%;
   }
   .lds-default div:nth-child(9) {
     animation-delay: -0.8s;
-    top: 62px;
-    left: 22px;
+    top: 77.5%;
+    left: 27.5%;
   }
   .lds-default div:nth-child(10) {
     animation-delay: -0.9s;
-    top: 66px;
-    left: 37px;
+    top: 82.5%;
+    left: 46.25%;
   }
   .lds-default div:nth-child(11) {
     animation-delay: -1s;
-    top: 62px;
-    left: 52px;
+    top: 77.5%;
+    left: 65%;
   }
   .lds-default div:nth-child(12) {
     animation-delay: -1.1s;
-    top: 52px;
-    left: 62px;
+    top: 65%;
+    left: 77.5%;
   }
   @keyframes lds-default {
     0%, 20%, 80%, 100% {

src/index.js

@@ -162,6 +162,11 @@ const SizeProp = () => {
                 <Ellipsis color="#be97e8" size={40} />
                 <Ellipsis color="#be97e8" size={20} />
             </div>
+            <div className="block">
+                <Default color="#be97e8" />
+                <Default color="#be97e8" size={40} />
+                <Default color="#be97e8" size={20} />
+            </div>
             <div style={{ clear: 'both' }}></div>
         </div>
     )