From 9b2b526f8fb9bd91e86682dbf3bc17cc55736f49 Mon Sep 17 00:00:00 2001
From: Kevin Qi <iqnivek@gmail.com>
Date: Sun, 29 May 2016 17:10:15 -0400
Subject: [PATCH] Add colored path, wip on animation

---
 demo/demo.jsx  |  2 +-
 src/index.jsx  | 19 ++++++++++++++++++-
 src/styles.css | 10 ++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/demo/demo.jsx b/demo/demo.jsx
index 7cf13e2..1c5fee1 100644
--- a/demo/demo.jsx
+++ b/demo/demo.jsx
@@ -35,7 +35,7 @@ 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">
-            <CircularProgressbar />
+            <CircularProgressbar percentage={50} />
           </div>
         </div>
 
diff --git a/src/index.jsx b/src/index.jsx
index 97c4c43..1dd624e 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,16 +12,33 @@ class CircularProgressbar extends React.Component {
       a ${radius},${radius} 0 1 1 0,${2 * radius}
       a ${radius},${radius} 0 1 1 0,-${2 * radius}
     `;
+
+    const diameter = Math.PI * 2 * radius;
+    const progressStyle = {
+      strokeDasharray: `${diameter}px ${diameter}px`,
+      strokeDashoffset: `${((100 - this.props.percentage) / 100 * diameter)}px`,
+    };
+
     return (
       <svg
         className="CircularProgressbar"
         viewBox="0 0 100 100"
       >
         <path
+          className="CircularProgressbar-trail"
           d={pathDescription}
           strokeWidth={this.props.strokeWidth}
-          fillOpacity="0"
+          fillOpacity={0}
         />
+
+        <path
+          className="CircularProgressbar-path"
+          d={pathDescription}
+          strokeWidth={this.props.strokeWidth}
+          fillOpacity={0}
+          style={progressStyle}
+        />
+
         <text>Hello</text>
       </svg>
     );
diff --git a/src/styles.css b/src/styles.css
index 2fbbc8f..5061be1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,6 +4,12 @@
  * All of the styles in this file are optional and configurable!
  */
 
-.CircularProgressbar path {
-  stroke: #ccc;
+.CircularProgressbar .CircularProgressbar-path {
+  stroke: #3c3;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;
+}
+
+.CircularProgressbar .CircularProgressbar-trail {
+  stroke: #d6d6d6;
 }