Add colored path, wip on animation

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>
 

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>
     );

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;
 }