diff --git a/README.md b/README.md
index 966c82b..0c57c93 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ import CircularProgressbar from 'react-circular-progressbar';
| `percentage` | Numeric percentage to display, from 0-100. Required. |
| `className` | Classes to apply to the svg element |
| `strokeWidth` | Width of circular line as a percentage relative to total width of component. Default: `8`. |
+| `background` | Whether to display background color. Default: `false`. |
| `backgroundPadding` | Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`. |
| `initialAnimation` | Toggle whether to animate progress starting from 0% on initial mount. Default: `false`. |
| `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |
diff --git a/docs/demo.jsx b/docs/demo.jsx
index b01e418..6d89eb4 100644
--- a/docs/demo.jsx
+++ b/docs/demo.jsx
@@ -92,8 +92,9 @@ class Demo extends React.Component {
description="Add a background color for that inverted look."
>
diff --git a/docs/index.html b/docs/index.html
index 746cdaa..cfc307e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -32,20 +32,6 @@
.CircularProgressbar.complete .CircularProgressbar-text {
fill: #99f;
}
-
- /* demo - background styles */
- .CircularProgressbar.background .CircularProgressbar-background {
- fill: #3e98c7;
- }
- .CircularProgressbar.background .CircularProgressbar-text {
- fill: #fff;
- }
- .CircularProgressbar.background .CircularProgressbar-path {
- stroke: #fff;
- }
- .CircularProgressbar.background .CircularProgressbar-trail {
- stroke: transparent;
- }
diff --git a/docs/index.js b/docs/index.js
index 11ff453..4b62b02 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -6527,6 +6527,20 @@ var CircularProgressbar = function (_React$Component) {
clearTimeout(this.initialTimeout);
window.cancelAnimationFrame(this.requestAnimationFrame);
}
+ }, {
+ key: 'getBackgroundPadding',
+ value: function getBackgroundPadding() {
+ if (this.props.background) {
+ // default padding to be the same as strokeWidth
+ // compare to null because 0 is falsy
+ if (this.props.backgroundPadding == null) {
+ return this.props.strokeWidth;
+ }
+ return this.props.backgroundPadding;
+ }
+ // don't add padding if not displaying background
+ return 0;
+ }
}, {
key: 'getPathDescription',
value: function getPathDescription() {
@@ -6548,7 +6562,7 @@ var CircularProgressbar = function (_React$Component) {
value: function getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
- return 50 - this.props.strokeWidth / 2 - this.props.backgroundPadding;
+ return 50 - this.props.strokeWidth / 2 - this.getBackgroundPadding();
}
}, {
key: 'render',
@@ -6562,12 +6576,12 @@ var CircularProgressbar = function (_React$Component) {
className: 'CircularProgressbar ' + this.props.className + ' ' + classForPercentage,
viewBox: '0 0 100 100'
},
- _react2.default.createElement('circle', {
+ this.props.background ? _react2.default.createElement('circle', {
className: 'CircularProgressbar-background',
cx: 50,
cy: 50,
r: 50
- }),
+ }) : null,
_react2.default.createElement('path', {
className: 'CircularProgressbar-trail',
d: pathDescription,
@@ -6599,8 +6613,9 @@ var CircularProgressbar = function (_React$Component) {
CircularProgressbar.propTypes = {
percentage: _propTypes2.default.number.isRequired,
- strokeWidth: _propTypes2.default.number,
className: _propTypes2.default.string,
+ strokeWidth: _propTypes2.default.number,
+ background: _propTypes2.default.bool,
backgroundPadding: _propTypes2.default.number,
initialAnimation: _propTypes2.default.bool,
classForPercentage: _propTypes2.default.func,
@@ -6610,7 +6625,7 @@ CircularProgressbar.propTypes = {
CircularProgressbar.defaultProps = {
strokeWidth: 8,
className: '',
- backgroundPadding: 0,
+ background: false,
initialAnimation: false,
textForPercentage: function textForPercentage(percentage) {
return percentage + '%';
@@ -10314,7 +10329,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-console.log('react-circular-progressbar v' + "0.2.1");
+console.log('react-circular-progressbar v' + "0.3.0");
var githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
@@ -10468,8 +10483,9 @@ var Demo = function (_React$Component2) {
description: 'Add a background color for that inverted look.'
},
_react2.default.createElement(_src2.default, {
- className: 'background',
- backgroundPadding: 4,
+ className: 'CircularProgressbar-inverted',
+ background: true,
+ backgroundPadding: 5,
strokeWidth: 6,
percentage: 33
})
diff --git a/docs/styles.css b/docs/styles.css
index a862146..9165fd8 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -32,5 +32,30 @@
}
.CircularProgressbar .CircularProgressbar-background {
- fill: transparent;
+ fill: #255b77;
+}
+
+/*
+ * Sample inverted styles. Use these with e.g.:
+ *
+ *
+ */
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
+ fill: #3e98c7;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
+ fill: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
+ stroke: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
+ stroke: transparent;
}
diff --git a/src/index.jsx b/src/index.jsx
index 6d8b1b5..ed9b622 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
const MIN_PERCENTAGE = 0;
const MAX_PERCENTAGE = 100;
-const BACKGROUND_OFFSET = 7;
class CircularProgressbar extends React.Component {
constructor(props) {
@@ -37,6 +36,19 @@ class CircularProgressbar extends React.Component {
window.cancelAnimationFrame(this.requestAnimationFrame);
}
+ getBackgroundPadding() {
+ if (this.props.background) {
+ // default padding to be the same as strokeWidth
+ // compare to null because 0 is falsy
+ if (this.props.backgroundPadding == null) {
+ return this.props.strokeWidth;
+ }
+ return this.props.backgroundPadding;
+ }
+ // don't add padding if not displaying background
+ return 0;
+ }
+
getPathDescription() {
const radius = this.getPathRadius();
return `
@@ -58,7 +70,7 @@ class CircularProgressbar extends React.Component {
getPathRadius() {
// the radius of the path is defined to be in the middle, so in order for the path to
// fit perfectly inside the 100x100 viewBox, need to subtract half the strokeWidth
- return 50 - (this.props.strokeWidth / 2) - this.props.backgroundPadding;
+ return 50 - (this.props.strokeWidth / 2) - this.getBackgroundPadding();
}
render() {
@@ -70,12 +82,16 @@ class CircularProgressbar extends React.Component {
className={`CircularProgressbar ${this.props.className} ${classForPercentage}`}
viewBox="0 0 100 100"
>
-
+ {
+ this.props.background ? (
+
+ ) : null
+ }
`${percentage}%`,
};
diff --git a/src/styles.css b/src/styles.css
index a862146..947089b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -32,5 +32,30 @@
}
.CircularProgressbar .CircularProgressbar-background {
- fill: transparent;
+ fill: #255b77;
+}
+
+/*
+ * Sample background styles. Use these with e.g.:
+ *
+ *
+ */
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
+ fill: #3e98c7;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
+ fill: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
+ stroke: #fff;
+}
+
+.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
+ stroke: transparent;
}