diff --git a/README.md b/README.md index d499878..fe6499d 100644 --- a/README.md +++ b/README.md @@ -86,6 +86,7 @@ You can configure the passing by following props: - **tension** - the tension value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api)) - **friction** - the friction value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api)) - **linecap** - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see [here](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap)) +- **arcSweepAngle** - the angle that you want your arc to sweep in the case where you don't want a full circle. Default is 360. - **children(fill)** - you can pass function as a child to receive current fill - **onAnimationComplete** - you can pass a callback function that will be invoked when animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations)) - **onLinearAnimationComplete** - you can pass a callback function that will be invoked when linear animation is complete. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations)) diff --git a/src/CircularProgress.js b/src/CircularProgress.js index 55a53b8..27105b1 100644 --- a/src/CircularProgress.js +++ b/src/CircularProgress.js @@ -41,12 +41,13 @@ export default class CircularProgress extends React.Component { style, rotation, linecap, + arcSweepAngle, children } = this.props; const fill = this.extractFill(this.props.fill); - const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, 360 * .9999); - const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (360 * .9999) * fill / 100); + const backgroundPath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, arcSweepAngle * .9999); + const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (arcSweepAngle * .9999) * fill / 100); const offset = size - (width * 2); const childContainerStyle = { @@ -73,6 +74,7 @@ export default class CircularProgress extends React.Component { d={backgroundPath} stroke={backgroundColor} strokeWidth={backgroundWidth != null ? backgroundWidth : width} + strokeCap={linecap} /> )}