diff --git a/src/Bars.js b/src/Bars.js
index 7bc1b32..ed90f74 100644
--- a/src/Bars.js
+++ b/src/Bars.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: 4,
     size: 20,
-    color: '#000'
+    color: '#000',
+    bgColor:'transparent'
   };
 
   state = {
@@ -76,11 +78,11 @@ export default class Bubbles extends Component {
   }
 
   render() {
-    const { size, spaceBetween } = this.props;
+    const { size, spaceBetween, bgColor } = this.props;
     const width = size / 3 * 5 + spaceBetween * 4;
     const height = size * 3;
 
-    return (<Surface width={width} height={height}>
+    return (<Surface width={width} height={height} style={{backgroundColor:bgColor}}>
       {this.renderBar(0)}
       {this.renderBar(1)}
       {this.renderBar(2)}
diff --git a/src/Bubbles.js b/src/Bubbles.js
index 5167ec1..c4739f5 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)}
diff --git a/src/DoubleBounce.js b/src/DoubleBounce.js
index 4e069bd..86f0c15 100644
--- a/src/DoubleBounce.js
+++ b/src/DoubleBounce.js
@@ -6,12 +6,14 @@ import Circle from './animated/Circle';
 export default class Pulse extends Component {
   static propTypes = {
     size: PropTypes.number,
-    color: PropTypes.string
+    color: PropTypes.string,
+    bgColor:PropTypes.string
   };
 
   static defaultProps = {
     size: 14,
-    color: '#000'
+    color: '#000',
+    bgColor:'transparent'
   };
 
   state = {
@@ -50,12 +52,12 @@ export default class Pulse extends Component {
   }
 
   render() {
-    const { size, color } = this.props;
+    const { size, color, bgColor} = this.props;
     const { bounces: [scale1, scale2] } = this.state;
     const width = size * 2;
     const height = size * 2;
 
-    return (<Surface width={width} height={height}>
+    return (<Surface width={width} height={height} style={{backgroundColor:bgColor}}>
       <Circle
         radius={size}
         fill={color}
diff --git a/src/Pulse.js b/src/Pulse.js
index f4c6a0b..fdc4fef 100644
--- a/src/Pulse.js
+++ b/src/Pulse.js
@@ -6,12 +6,14 @@ import Circle from './animated/Circle';
 export default class Pulse extends Component {
   static propTypes = {
     size: PropTypes.number,
-    color: PropTypes.string
+    color: PropTypes.string,
+    bgColor:PropTypes.string
   };
 
   static defaultProps = {
     size: 14,
-    color: '#000'
+    color: '#000',
+    bgColor:'transparent'
   };
 
   state = {
@@ -50,12 +52,12 @@ export default class Pulse extends Component {
   }
 
   render() {
-    const { size, color } = this.props;
+    const { size, color, bgColor } = this.props;
     const { pulse } = this.state;
     const width = size * 2;
     const height = size * 2;
 
-    return (<Surface width={width} height={height}>
+    return (<Surface width={width} height={height} style={{backgroundColor:bgColor}}>
       <Circle
         radius={size}
         fill={color}