archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2026-01-18 15:55:06 +00:00
Code Issues Projects Releases Wiki Activity

Get text working

Browse Source
This commit is contained in:
Kevin Qi 2016-05-29 17:30:48 -04:00
parent a070d72c9f
commit 3e1c7d5fb3
2 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/index.jsx
View File

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

8
src/styles.css
View File

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