Improve demo

demo/demo.jsx

@@ -25,22 +25,25 @@ class ChangingProgressbar extends React.Component {
     super(props);
 
     this.state = {
-      percentage: 0,
+      currentPercentageIndex: 0,
     };
   }
 
   componentDidMount() {
     setInterval(() => {
       this.setState({
-        percentage: (this.state.percentage + 20) % 120
+        currentPercentageIndex: (this.state.currentPercentageIndex + 1) % this.props.percentages.length
       });
-    }, 1000);
+    }, this.props.interval);
   }
 
   render() {
-    return <CircularProgressbar {...this.props} percentage={this.state.percentage} />;
+    return <CircularProgressbar {...this.props} percentage={this.props.percentages[this.state.currentPercentageIndex]} />;
   }
 }
+ChangingProgressbar.defaultProps = {
+  interval: 1000,
+}
 
 class Demo extends React.Component {
   render() {
@@ -57,8 +60,9 @@ class Demo extends React.Component {
 
         <div className="row m-b-3">
           <div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
-            <ChangingProgressbar />
-
+            <ChangingProgressbar
+              percentages={[0, 20, 40, 60, 80, 100]}
+            />
           </div>
         </div>
 
@@ -71,12 +75,17 @@ class Demo extends React.Component {
         <hr />
         <div className="row">
           <div className="col-xs-12 col-md-4">
-            <ChangingProgressbar
-              classForPercentage={(percentage) => {
-                return percentage < 50 ? 'low' : 'high';
-              }}
-            />
-            <p>Configure it to change based on percentage. Using plain old CSS classes.</p>
+            <div className="row">
+              <div className="col-xs-6 offset-xs-3">
+                <ChangingProgressbar
+                  percentages={[75, 100]}
+                  classForPercentage={(percentage) => {
+                    return percentage === 100 ? 'complete' : 'incomplete';
+                  }}
+                />
+              </div>
+            </div>
+            <p>Configure color/styling based on percentage using plain old CSS classes.</p>
           </div>
         </div>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-circular-progressbar",
   "version": "0.1.0",
-  "description": "A circular progressbar svg component",
+  "description": "A circular progress indicator",
   "author": "Kevin Qi <iqnivek@gmail.com>",
   "main": "./build/index.js",
   "repository": {

src/styles.css

@@ -21,15 +21,13 @@
   text-anchor: middle;
 }
 
-.CircularProgressbar.low .CircularProgressbar-path {
-  stroke: #00f;
+.CircularProgressbar.incomplete .CircularProgressbar-path {
+  stroke: #f66;
 }
-.CircularProgressbar.low .CircularProgressbar-text {
-  fill: #00f;
+.CircularProgressbar.incomplete .CircularProgressbar-text {
+  fill: #f66;
 }
-.CircularProgressbar.high .CircularProgressbar-path {
-  stroke: #f00;
+.CircularProgressbar.complete .CircularProgressbar-path {
 }
-.CircularProgressbar.high .CircularProgressbar-text {
-  fill: #f00;
+.CircularProgressbar.complete .CircularProgressbar-text {
 }