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

WIP on making colors configurably change depending on percentage

Browse Source
This commit is contained in:
Kevin Qi 2016-05-29 18:05:45 -04:00
parent 3e1c7d5fb3
commit df1cd98a22
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/demo.jsx
View File

@ -40,7 +40,7 @@ class ChangingProgressbar extends React.Component {
}
render() {
return <CircularProgressbar percentage={this.state.percentage} />;
return <CircularProgressbar {...this.props} percentage={this.state.percentage} />;
}
}
@ -60,6 +60,10 @@ 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">
<ChangingProgressbar />
<ChangingProgressbar
classForPercentage={(percentage) => (percentage < 50 ? 'low' : 'high')}
/>
</div>
</div>

2
src/index.jsx
View File

@ -21,7 +21,7 @@ class CircularProgressbar extends React.Component {
return (
<svg
className="CircularProgressbar"
className={`CircularProgressbar ${this.props.classForPercentage ? this.props.classForPercentage(this.percentage) : ''}`}
viewBox="0 0 100 100"
>
<path

16
src/styles.css
View File

@ -5,7 +5,7 @@
*/
.CircularProgressbar .CircularProgressbar-path {
stroke: #3c3;
stroke: #3e98c7;
stroke-linecap: round;
transition: stroke-dashoffset 0.5s ease 0s;
}
@ -15,7 +15,21 @@
}
.CircularProgressbar .CircularProgressbar-text {
fill: #3e98c7;
font-size: 20px;
dominant-baseline: middle;
text-anchor: middle;
}
.CircularProgressbar.low .CircularProgressbar-path {
stroke: #00f;
}
.CircularProgressbar.low .CircularProgressbar-text {
fill: #00f;
}
.CircularProgressbar.low .CircularProgressbar-path {
stroke: #f00;
}
.CircularProgressbar.high .CircularProgressbar-text {
fill: #f00;
}