From 3e1c7d5fb3848cedee577c0ee7430022da279e4b Mon Sep 17 00:00:00 2001
From: Kevin Qi <iqnivek@gmail.com>
Date: Sun, 29 May 2016 17:30:48 -0400
Subject: [PATCH] Get text working

---
 src/index.jsx  | 9 ++++++++-
 src/styles.css | 8 +++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/index.jsx b/src/index.jsx
index 1dd624e..80eac64 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -39,7 +39,13 @@ class CircularProgressbar extends React.Component {
           style={progressStyle}
         />
 
-        <text>Hello</text>
+        <text
+          className="CircularProgressbar-text"
+          x={50}
+          y={50}
+        >
+          {this.props.textForPercentage(this.props.percentage)}
+        </text>
       </svg>
     );
   }
@@ -51,6 +57,7 @@ CircularProgressbar.propTypes = {
 
 CircularProgressbar.defaultProps = {
   strokeWidth: 8,
+  textForPercentage: (percentage) => `${percentage}%`,
 };
 
 export default CircularProgressbar;
diff --git a/src/styles.css b/src/styles.css
index 5061be1..2b56fa9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,9 +7,15 @@
 .CircularProgressbar .CircularProgressbar-path {
   stroke: #3c3;
   stroke-linecap: round;
-  transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;
+  transition: stroke-dashoffset 0.5s ease 0s;
 }
 
 .CircularProgressbar .CircularProgressbar-trail {
   stroke: #d6d6d6;
 }
+
+.CircularProgressbar .CircularProgressbar-text {
+  font-size: 20px;
+  dominant-baseline: middle;
+  text-anchor: middle;
+}