Fix classForPercentage and demo

demo/demo.jsx

@@ -31,11 +31,9 @@ class ChangingProgressbar extends React.Component {
 
   componentDidMount() {
     setInterval(() => {
-      if (this.state.percentage < 100) {
-        this.setState({
-          percentage: Math.min(this.state.percentage + 20, 100)
-        });
-      }
+      this.setState({
+        percentage: (this.state.percentage + 20) % 120
+      });
     }, 1000);
   }
 
@@ -61,9 +59,6 @@ class Demo extends React.Component {
           <div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
             <ChangingProgressbar />
 
-            <ChangingProgressbar
-              classForPercentage={(percentage) => (percentage < 50 ? 'low' : 'high')}
-            />
           </div>
         </div>
 
@@ -73,6 +68,18 @@ class Demo extends React.Component {
           <a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
         </div>
 
+        <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>
+        </div>
+
         <hr />
         <h2 className="text-md-center m-y-3">Configuration</h2>
 

src/index.jsx

@@ -21,7 +21,7 @@ class CircularProgressbar extends React.Component {
 
     return (
       <svg
-        className={`CircularProgressbar ${this.props.classForPercentage ? this.props.classForPercentage(this.percentage) : ''}`}
+        className={`CircularProgressbar ${this.props.classForPercentage ? this.props.classForPercentage(this.props.percentage) : ''}`}
         viewBox="0 0 100 100"
       >
         <path

src/styles.css

@@ -27,7 +27,7 @@
 .CircularProgressbar.low .CircularProgressbar-text {
   fill: #00f;
 }
-.CircularProgressbar.low .CircularProgressbar-path {
+.CircularProgressbar.high .CircularProgressbar-path {
   stroke: #f00;
 }
 .CircularProgressbar.high .CircularProgressbar-text {