Demo: http://codepen.io/chitsaou/pen/RWNWjG
How to draw a pie progress: http://codepen.io/jo-asakura/pen/stFHi
Demo: http://codepen.io/chitsaou/pen/RWNWjG
How to draw a pie progress: http://codepen.io/jo-asakura/pen/stFHi
var Pie = React.createClass({ | |
defaultProps: { | |
percentage: 0 | |
}, | |
calculateAngle: function(percentage) { | |
return (percentage) * (360 / 100); | |
}, | |
render: function() { | |
var angle = this.calculateAngle(this.props.percentage); | |
var leftStyle = { | |
transform: "rotate(" + angle + "deg)" | |
}; | |
var className = "pie"; | |
if (this.props.percentage > 50) { | |
className += " overhalf"; | |
} else { | |
className += " underhalf"; | |
} | |
return ( | |
<div className={ className }> | |
<div className="circle left-side" style={leftStyle}></div> | |
<div className="circle right-side"></div> | |
</div> | |
); | |
} | |
}); |
/* modified from http://codepen.io/jo-asakura/pen/stFHi */ | |
.pie { | |
width: 100%; | |
height: 100%; | |
position: relative; | |
.circle { | |
box-sizing: border-box; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
background-color: black; | |
border-radius: 50%; | |
-webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); | |
-moz-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); | |
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); | |
&.right-side { | |
transform: rotate(180deg); | |
} | |
} | |
&.underhalf { | |
-webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); | |
-moz-clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); | |
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); | |
.right-side { | |
display: none; | |
} | |
} | |
} | |
// control custom styles here | |
.progress-a .pie { | |
width: 300px; | |
height: 300px; | |
} | |
.progress-b .pie { | |
width: 300px; | |
height: 300px; | |
.circle { | |
background-color: transparent; | |
border: 20px solid green; | |
} | |
} |