Merge pull request #89 from bamlab/prop/backgroundWidth

Add backgroundWidth prop

README.md

@@ -74,7 +74,8 @@ this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the p
 You can configure the passing by following props:
 
 - **size** – width and height of the circle
-- **width** - thickness of the line
+- **width** - thickness of the lines
+- **backgroundWidth** - thickness of the background line
 - **fill** - current, percentage fill (from 0 to 100)
 - **prefill** - percentage fill before the animation (from 0 to 100)
 - **tintColor** - color of a progress line

src/CircularProgress.js

@@ -26,7 +26,7 @@ export default class CircularProgress extends React.Component {
   }
 
   render() {
-    const { size, width, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
+    const { size, width, backgroundWidth, tintColor, backgroundColor, style, rotation, linecap, children } = this.props;
     const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999);
 
     const fill = this.extractFill(this.props.fill);
@@ -40,7 +40,7 @@ export default class CircularProgress extends React.Component {
           <Group rotation={rotation - 90} originX={size/2} originY={size/2}>
             <Shape d={backgroundPath}
                    stroke={backgroundColor}
-                   strokeWidth={width}/>
+                   strokeWidth={backgroundWidth != null ? backgroundWidth : width}/>
             <Shape d={circlePath}
                    stroke={tintColor}
                    strokeWidth={width}
@@ -60,6 +60,7 @@ CircularProgress.propTypes = {
   size: PropTypes.number.isRequired,
   fill: PropTypes.number.isRequired,
   width: PropTypes.number.isRequired,
+  backgroundWidth: PropTypes.number,
   tintColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   rotation: PropTypes.number,