From 858f5f19c72d106c01a8b363a4181fd6400ea4f1 Mon Sep 17 00:00:00 2001
From: qiutingkawayile <qiutingkawayile@126.com>
Date: Wed, 11 May 2016 14:47:15 +0800
Subject: [PATCH] Customize background color

Loader is not in use under the single background color, there may be mixed a variety of background colors. Hence the need for a transparent background, or other colors.
---
 src/Bubbles.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Bubbles.js b/src/Bubbles.js
index 5167ec1..7c327bd 100644
--- a/src/Bubbles.js
+++ b/src/Bubbles.js
@@ -7,13 +7,15 @@ export default class Bubbles extends Component {
   static propTypes = {
     size: PropTypes.number,
     color: PropTypes.string,
-    spaceBetween: PropTypes.number
+    spaceBetween: PropTypes.number,
+    bgColor:PropTypes.string
   };
 
   static defaultProps = {
     spaceBetween: 6,
     size: 11,
-    color: '#000'
+    color: '#000',
+    bgColor:'transparent'
   };
 
   state = {
@@ -77,11 +79,11 @@ export default class Bubbles extends Component {
   }
 
   render() {
-    const { size, spaceBetween } = this.props;
+    const { size, spaceBetween ,bgColor} = this.props;
     const width = size * 6 + spaceBetween * 2;
     const height = size * 2;
 
-    return (<Surface width={width} height={height}>
+    return (<Surface width={width} height={height} style={{backgroundColor:bgColor}}>
       {this.renderBubble(0)}
       {this.renderBubble(1)}
       {this.renderBubble(2)}