Merge pull request #14 from break7533/feature/facebook-sizing

Feature/facebook sizing

Author: JoshK2

README.md

@@ -36,7 +36,7 @@ Component that accepts `size` prop have a default size in pixel.
 | `<Default/>`     | `#7f58af`     | -             | `""`              | `{}`          |
 | `<DualRing/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Ellipsis/>`    | `#7f58af`     | -             | `""`              | `{}`          |
-| `<Facebook/>`    | `#7f58af`     | -             | `""`              | `{}`          |
+| `<Facebook/>`    | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Grid/>`        | `#7f58af`     | -             | `""`              | `{}`          |
 | `<Heart/>`       | `#7f58af`     | `80`          | `""`              | `{}`          |
 | `<Hourglass/>`   | `#7f58af`     | -             | `""`              | `{}`          |

src/components/Facebook/index.js

@@ -2,11 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import './style.css'
 
-export default function Facebook({ color, className, style }) {
+export default function Facebook({ color, className, style, size }) {
     const circles = [...Array(3)].map((_, index) => <div key={index} style={{ background: `${color}` }}></div>)
 
     return (
-        <div className={`lds-facebook ${className}`} style={{ ...style }}>
+        <div className={`lds-facebook ${className}`} style={{ width: size, height: size, ...style }}>
             {circles}
         </div>
     )
@@ -19,10 +19,13 @@ Facebook.propTypes = {
     className: PropTypes.string,
     /** style object */
     style: PropTypes.object,
+    /** size in pixel */
+    size: PropTypes.number,
 }
 
 Facebook.defaultProps = {
     color: '#7f58af',
     className: '',
     style: {},
+    size: 80,
 }

src/components/Facebook/style.css

@@ -7,30 +7,30 @@
   .lds-facebook div {
     display: inline-block;
     position: absolute;
-    left: 8px;
-    width: 16px;
+    left: 10%;
+    width: 20%;
     background: #fff;
     animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
   }
   .lds-facebook div:nth-child(1) {
-    left: 8px;
+    left: 10%;
     animation-delay: -0.24s;
   }
   .lds-facebook div:nth-child(2) {
-    left: 32px;
+    left: 40%;
     animation-delay: -0.12s;
   }
   .lds-facebook div:nth-child(3) {
-    left: 56px;
+    left: 70%;
     animation-delay: 0;
   }
   @keyframes lds-facebook {
     0% {
-      top: 8px;
-      height: 64px;
+      top: 10%;
+      height: 80%;
     }
     50%, 100% {
-      top: 24px;
-      height: 32px;
+      top: 30%;
+      height: 40%;
     }
-  }
+  }

src/index.js

@@ -143,6 +143,11 @@ const SizeProp = () => {
                 <Heart color="#be97e8" size={20} />
             </div>
             <div className="block">
+                <Facebook color="#be97e8" />
+                <Facebook color="#be97e8" size={40} />
+                <Facebook color="#be97e8" size={20} />
+             </div>
+             <div className="block">
                 <Ripple color="#be97e8" />
                 <Ripple color="#be97e8" size={40} />
                 <Ripple color="#be97e8" size={20} />