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}
/>
- Hello
+
+ {this.props.textForPercentage(this.props.percentage)}
+
);
}
@@ -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;
+}