Skip to content

Instantly share code, notes, and snippets.

@yorkxin

yorkxin/Pie.jsx

Last active Sep 3, 2015
Embed
What would you like to do?
Pie progress component for React
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment